38、VS code必备前端插件
安装完成后，默认显示英文，我们可以通过安装中文语言包插件来显示中文，操作如下：
打开vscode，点击插件图标（或 + + X），在搜索框中输入“chinese”，安装
使用快捷键“ + + P”打开vscode的命令框，输入 display ，点击“Configure Display Language”，切换语言
如果不喜欢VS code本身的主题色，也可以更换默认主题，在命令框中输入 color theme ，回车，会进入主题列表，通过上下键切换主题，还不满足，没关系，点击安装其他颜色主题，在左侧会出现各式各样的主题插件，选择一个安装即可。
推荐一款图标插件 vscode-icons ，安装成功后，会根据不同的文件类型添加不同的图标样式，看起来会更有趣。
自动闭合 HTML/XML 标签
自动重命名 HTML/XML 标签
解析CSS并自动添加前缀
用于着色匹配括号，让你的代码分层更清晰
运行代码片段或多种语言的代码文件
源代码拼写检查器，提示代码中单词拼写错误
允许查看css，并从HTML文件定位到css文件，文件定义跳转
支持.env文件语法，高亮显示
在VS code中绘制流程图，随时记录你的idea，不要太方便
代码格式校验工具，配合项目中的校验规则，实现保存时格式化代码，开发必备，你值得拥有！
配置文件，在setting.json中添加，可以参考一下
突出显示匹配的标签
当你引入时在左侧会显示图片的缩略图，方便预览
在编辑器中展示引用包的大小，让你更了解你引入的包
帮助你更快速的添加console和删除console，确实方便
在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！
代码插件，在导入语句中自动完成NPM模块
允许你在默认浏览器或应用程序中打开当前文件。
自动识别文件路径，引用更方便
非常喜欢的一款代码格式化工具，在项目中也可以配置自己的规则
方便svg文件预览
快速搜索编辑器中添加的标签，如todo和fixme，并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。
突出显示尾随空格并快速删除它们！
你的代码很强大，释放它！
......
大家有什么好用的插件，也可以推荐一下哈~
作为一个前端开发，vscode有哪些值得安装的插件
1. Open-In-Browser
由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。
2. Quokka
Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
3. Faker
使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。
4. CSS Peek
使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
5. HTML Boilerplate
通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
6. Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！
7. Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
8. SVG Viewer
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
9. TODO Highlight
这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。
10. Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
11. Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
12. Change Case
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
13. Regex Previewer
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
14. Language and Framework Packs
VSCode 默认支持大量的主流编程语言，但如果你所使用的编程语言不包括在内，也可以通过下载扩展包来自动添加。同时，你还可以添加一些像 React Native 与 Vue 的相关 Web 开发插件包。
15. Themes
当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：
• One Monokai
• Aglia
• One Dark
• Material Icon
vscode插件快捷键点击是另一个软件
，希望可以帮助各位码农锋利自己的武器。
快捷键器篇
窗口文件相关快捷键
新建文件
Ctrl+N
文件之间切换贴
Ctrl+Tab
打开一个新的VS Code编辑器
Ctrl+Shift+N
关闭当前窗口
Ctrl+W
关闭当前的VS Code编辑器
Ctrl+Shift+W
切出一个新的编辑器窗口（最多3个)
Ctrl+
切换左中右3个编辑器窗口的快捷键
Ctrl+1 Ctrl+2 Ctrl+3
全屏显示
F11
放大或缩小(以编辑器左上角为基准)
Ctrl +/-
侧边栏显示或隐藏
Ctrl+B
显示 Debug
Ctrl+Shift+D
显示 Output
Ctrl+Shift+U
搬砖相关快捷键
复制
Ctrl+C
剪切
Ctrl+X
粘贴
Ctrl+V
代码行向左或向右缩进
Ctrl+[ 、 Ctrl+]
代码格式化
Shift+Alt+F
向上或向下移动一行
Alt+Up 或 Alt+Down
向上或向下复制一行
Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行
Ctrl+Enter
在当前行上方插入一行
Ctrl+Shift+Enter
移动到行首
Home
移动到行尾
End
移动到文件结尾
Ctrl+End
移动到文件开头
Ctrl+Home
选择从光标到行尾的内容
Shift+End
选择从光标到行首的内容
Shift+Home
删除光标右侧的所有内容(当前行)
Ctrl+Delete
删除当前行
ctrl+shift+k
下一个匹配的也被选中
Ctrl+D
回退上一个光标操作
Ctrl+U
可能有的小伙伴会说，这快捷键也太多了吧，但是这仅仅是冰山一角。不过各位小伙伴也不要慌张，vscode同样也提供了非常人性化的自定义快捷键功能。那到底怎么自定义尼？下面奉上一张宝图，大家就一目了然了。
看到这里，可能很多小伙伴会有疑惑，为什么我的编辑器是中文的，而你的是英文尼？这就和我们接下来要说的常用插件有关了。带我慢慢道来。
插件篇
编辑器常用插件
Chinese (Simplified) Language Pack for Visual Studio Code
安装这个插件就可以把编译器原始的英文界面更改为中文界面了。
background
编码搬砖的过程，无疑是相当枯燥乏味的，但是如果加上这样的小姐姐尼？是不是一下就不枯燥了？
答案是肯定的。也很幸运的有background这个插件，安装之后会有一个默认的背景图片，如图所示：
这个时候，我们可以在修改设置中搜索background修改设置json文件，如下所示：
修改代码奉上：
{
“background.useDefault”: false,
“background.style”: {
“content”:"’’",
“pointer-events”:“none”,
“position”:“absolute”,//图片位置
“width”:“100%”,
“height”:“100%”,
“z-index”:“99999”,
“background.repeat”:“no-repeat”,
“background-size”:“100%,100%”,//图片大小
“opacity”:0.2 //透明度
},
“background.customImages”: [//此处配置自己对应的背景图
“”
],
}
Rainbow Fart
背景图片有了，那么能不能也有声音尼？我可以肯定的告诉你，可以。只需要安装Rainbow Fart这个插件，然后启动这个插件就可以在编码的过程中，出现小姐姐的声音了。启动方法如下：
在vscode软件中使用ctrl+shift+p 打开命令面板，复制Enable Rainbow Fart 后回车，右下方弹出的提示后点击open按钮，或直接访问（ ）,在弹出的页面点击授权，如下图所示：
授权成功之后，就可以愉快的编码了。
1
2
3
open in browser
在浏览器中打开页面
Live Server
以服务器的方式打开页面
搬砖常用插件
Auto Close Tag
标签自动闭合
Auto Rename Tag
开始标签和结束标签自动进行同步
Bracket Pair Colorizer
会已不同颜色和横线显示括号的范围
HTML Snippets
快速的生成html标签
JS-CSS-HTML Formatter
代码格式化
Color Info
颜色提示插件，只需要将鼠标放在颜色值上悬停，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息啦。
jQuery Code Snippets
jQuery自动提示
Path Autocomplete
路径自动补齐
ESLint
检测JS必备
Html Css Support
在标签新增class的时候会提示之前写过的class
Beautify / Beautify css/sass/scss/less
样式格式化（两个的区别还没感受出来）
Vetur
更多内容请见原文，原文转载自：
分类: 前端
标签: vscode常用插件快捷键, 前端
好文要顶 关注我 收藏该文  
忘川信使
粉丝 - 0 关注 - 0
+加关注
00
» 下一篇： 面试宝典带你走向人生巅峰
posted @ 2022-03-28 16:33 忘川信使 阅读(324) 评论(0) 编辑 收藏 举报
2019年27个神奇的VSCode工具
Visual Studio Code（更简称为 VS代码 ）是一个轻量级但功能强大的跨平台源代码编辑器，可在桌面上运行。内置支持TypeScript和Chrome Debugger等开发工具，我很快就爱上了编辑器，我用它来构建我的项目。
谁 不 喜欢可供公众使用和贡献的bajillion开源扩展？
如果您正在寻找更多工具添加到您的开发工具包中，我希望本文可以帮助您找到一个新的工具来采用！
并非所有 这些工具都 专门针对JavaScript语言 ，而是针对您和我这样有共同兴趣的 JavaScript开发人员的 工具。 作为一名JavaScript开发人员 ，我将分享在几个方面增强我的开发流程的内容，这些方面围绕着人类五感中的五分之一。
以下是2019年针对JavaScript开发人员的26个神奇VS代码工具
排在第一位的是我最喜欢的Project Snippets - 源自VS Code中内置的原始 用户代码段 。
如果您不熟悉用户代码段，基本上此功能允许您创建自己的代码段以在整个项目中重复使用。
但究竟是什么意思“重复使用”它们呢？
好吧，如果您经常发现自己编写任何类型的样板，如下所示：
实际上，你可以直接将其打入你的用户片段，这样你就不需要写出（或复制并粘贴）整个事物，你只需要输入一个自定义 前缀 来生成你配置它的片段。如果转到“ 文件”“首选项”“用户代码段” ，则可以选择通过单击“ 新建全局代码段文件” 来创建新的全局代码 段 。
例如，要为TypeScript React项目创建自己的 代码段文件 ，可以单击 New Global Snippets File ，键入 typescriptreact.json ，它将引导您到新创建的.json文件，您可以将其用于使用TypeScript构建的反应应用程序。
例如，要从上面的代码示例创建用户代码段，您可以这样做：
有了这个，你可以创建一个.tsx文件，输入前缀，rsr并出现一个生成片段的建议。按弹出窗口上的 选项卡 将生成以下代码段：
但是问题在于，这将持续存在于 所有项目中 （在某些情况下，这些 项目 对于一般的片段来说可能是强大的）。某些项目的配置略有不同，当您需要区分特定用例时，配置代码段的全局文件开始成为问题。例如，一个用例是每个项目的项目结构不同：
对于具有该特定文件/文件夹结构的项目，这可能已足够，但如果您正在处理Link组件具有类似路径的另一个项目，该components/Link怎么办？
注意三个 边界测试 如何用单引号将它们的值包装起来：border: '1px solid red'。这在JavaScript中是完全有效的，但如果您使用样式组件作为项目的样式解决方案呢？语法不再适用于该工作空间，因为样式化组件使用常规CSS语法！
这就是Project Snippets开始闪耀的地方！
如果你喜欢在代码之间编写注释，那么你有时可能会发现搜索过去编写的某些文档的位置有点令人沮丧，因为代码有时会变得有点拥挤。
通过更好的评论，您可以通过介绍彩色评论使您的评论更加明显：
现在，您可以更好地提醒您的团队成员，!或者?引起他们的注意:)
我第一次看到这个扩展的屏幕截图时，我知道我必须采用并将此权利引入我的开发工具包中。编码是我的热情，激情应该是有趣的。所以有了这种心态，这绝对有助于我享受我喜欢做的事情。
一个快速有趣的事实是，有时多一点颜色可以帮助加快发展流程，因为它可以影响血液流动和唤醒。换句话说 - 您 不仅 可以获得 娱乐 ，还可以通过为您的工作流程添加颜色来改善您的 健康 状况！
Material Theme是一个史诗般的主题，您可以直接安装到VS代码中，使您的代码如下所示：
这必须是有史以来最好的主题之一。我不确定如何详细说明主题是多么棒，但这真是太棒了。立即安装并与我一起努力将世界变成一个物质主题世界！（或者不要加入我，只使用主题。这也很酷）
如果您是TypeScript用户：由于TSLint背后的支持者宣布计划在今年某个时候弃用TSLint，您应该开始考虑移动tslint配置以使用ESLint + TypeScript配置方法。
项目逐渐采用@ typescript-eslint / parser和相关软件包来确保其项目的面向未来的设置。您仍然可以使用新设置来充分利用ESLint的大多数规则和兼容性。
对我来说，由于多种原因，stylelint在我的所有项目中都是必须的：
现在我不确定你或其他开发人员在为他们的项目进行头脑风暴时喜欢做笔记，但我喜欢用降价格式写下笔记。
首先，我很容易理解。还有大量的工具可以帮助促进写下降记录文本的过程，包括markdownlint。Markdownlint是一个vs代码扩展linter，可以帮助您在.md文件中进行样式检查。更酷的部分是它支持 更漂亮的格式化 ！
此外，我个人喜欢在我的所有项目上安装Docsify，因为它支持每个项目的降价和其他增强功能。
我习惯在我的应用程序代码中编写待办事项，因此像TODO Highlight这样的扩展对于突出我在整个项目中设置的待办事项非常有用。
Import Cost是第一次尝试时变得非常有用的工具之一。但过了一段时间，你开始意识到你不再需要这个工具了，因为它会告诉你一段时间内你已经知道的东西。尽管如此，请尝试使用此工具一段时间，因为您可能会发现它很有用。
Sometimes it can get frustrating trying to match the other end of a tag. That's where Highlight Matching Tag becomes to take your frustrations away:
说到挫折，有时候回到音乐播放器切换音乐然后不得不回到vs代码继续做你正在做的事情会让人感到沮丧。这就是vscode-spotify的用武之地，因为它允许你在内部和代码中使用spotify！
使用此扩展程序，您将能够在状态栏中看到当前正在播放的歌曲，通过按热键切换歌曲，单击按钮来控制spotify等等！
GraphQL 一直在不断发展，因为我们开始在JavaScript社区的每个角落看到它。如上所述，如果您尚未考虑在处理GraphQL语法时从语法高亮，linting和自动完成功能中受益，那么开始考虑将VSQL的GraphQL安装到您的vs代码中可能是一个好主意。
我个人经常使用GatsbyJS，因此我的日常编码生活涉及阅读GraphQL语法。
与上面的 突出显示匹配标记 类似的原因。如果您无法通过缩进找到自己的方式，那么Indent Rainbow可以帮助您更轻松地阅读这些缩进。
这是一个例子：
这是其中一个扩展，其中 每个人都 问我“你从哪里得到的？” 如果他们还没有遇到这个扩展。基本上，Color Highlight有助于突出显示代码中的颜色，如下所示：
Color Picker是一个vscode扩展，为您提供图形用户界面，以帮助您选择和生成CSS颜色符号等颜色代码。
我第一次阅读REST Client并亲自试用它，它似乎不是像Postman这样的老软件的有用工具。
但是我使用REST Client扩展的次数越多，我就越意识到它会对我的开发工具产生多大的影响，特别是在测试API时。
您可以创建一个新文件并使用以下一行：
创建HTTP GET请求所需要做的就是突出显示一行，转到命令面板（CTRL + SHIFT + P），单击 Rest Client：Send Request ，它将继续并弹出一个新选项卡在一秒钟内请求响应详细信息。
很有用：
您甚至可以将参数或请求正文数据传递给POST请求，下面只需要几行代码：
这将使用body参数发出POST请求 { "email": "someemail@gmail.com", "password": 1 }
我讨厌不得不手动写下我在开发工具中使用的扩展笔记的降价列表，并将其保存在像Evernote这样的笔记服务中，直到Settings Sync拯救。
基本上，你只需要一个gist / github帐户，每次你想要保存你的设置（这包括键绑定，片段，扩展等）你只需要按 SHIFT + ALT + U 将 私人 设置上传到你的吉斯帐户，所以下次登录或重新格式化到另一台计算机时，您可以通过按 SHIFT + ALT + D 立即下载您的设置。
Todo Tree将帮助您在整个应用程序代码中找到您创建的所有待办事项到一个树中，您可以在面板的左侧一次查看它们：
Toggle Quotes是一个有趣的实用程序扩展，可让您在引号之间切换。当您即将使用字符串插值时需要切换到反引号时，它会派上用场，特别是当更漂亮的习惯是将字符串美化为单引号时。
您可以在不使用Better Align首先选择代码的情况下对齐代码。
要使用：将光标放在要对齐的代码中，然后使用 CTRL + SHIFT + P （或任何您自定义的快捷方式打开命令调色板）弹出命令调色板并调用 Align 命令。
自从我第一次启动VS代码以来，Auto Close Tag一直对我很有用。它允许你输入类似的东西p，按下斜线/，它将为你完成最后一个箭头。这是默认情况下不在vs代码中的东西，对我来说非常有用:)
当我的数组没有按字母顺序对齐时，我有一种令人沮丧的习惯，就是变得沮丧。幸运的是，Sort Lines等工具可以让我的生活更轻松。如果你以类似的方式感到沮丧，你可能会发现这对你很有帮助。
我可能是唯一一个发现这个有用的人，但是VScode Google Translate帮助我完成了我的项目，因为我参与了一个多语言的项目。如果您不想离开编辑器，这很有用。
Prettier是vs代码的扩展，可自动格式化您的JavaScript / TypeScript /等。代码使用更漂亮。
我更喜欢Material Icon Theme而不是其他图标主题，因为对于哪些文件类型来说，它更明显，尤其是在黑暗主题中工作时。
HTML中的CSS类名称的IntelliSense是基于HTML class属性的CSS类名称完成，该属性基于工作区中的定义。
Path Intellisense是一个vs代码扩展，可以为您自动填充文件名。
我希望这有助于您找到新的东西添加到您的开发套件中！
