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 缩进的空格数
偶然间打开一个以前写的 markdown 文件，在 vscode 中编辑，发现按 tab 键缩进（indent）都是2个空格，无论是list，还是非list的普通缩进。
打开其他的markdown或.c、.h、.cpp文件都是正常的。
在 settings 里挨个查看和修改 tab、space、indent等关键字的属性，都没找到所以然。
google了一下“vscode indent 2 space markdown”，一下命中答案。
首先在状态栏上有显示
缩进是4个space：
缩进是2个spaces：
直接点击状态栏，即能修改之。
从上图看来， vscode 也知道我指定的是4，但偏要给我设定未2，可能是识别到了什么，难道根据我当前文件内的缩进做了修改？
据此推测，应该有这样一个属性，来觉得是否进行这种探测，果然有：
做这么AI，真让人有点不适应。
八个提高效率的VSCode必备扩展插件
Visual Studio Code 是用于构建当前 Web 应用程序的源代码编辑器。它是一个免费的开源管理器。它支持可用于 Web 应用程序改进的各种增强功能。这里是提高工作效率的10个必备VSCode 扩展：
1. 代码拼写检查器
一个基本的拼写检查器，适用于驼峰式代码。
此拼写检查器的目标是帮助捕获常见的拼写错误，同时将误报数量保持在较低水平。
2. Compareit
Compareit 扩展可帮助您比较两个文件，您可以从当前项目和计算机或剪贴板上的其他目录中进行选择。
3. stepsize
有时您会遇到技术债务或其他应该修复的技术问题。您可能没有时间立即修复它，但您想让它可见并提出问题。
Stepsize 允许您为代码添加书签、直接从编辑器跟踪技术债务以及创建 TODO。它还允许您与您的团队成员协作进行维护和重构工作。
直接从 VSCode 报告技术债务
4. WakaTime
WakaTime 允许您查看从您的编程活动自动生成的指标、见解和时间跟踪。
您将准确了解编码花费的时间，因为它会在您开始和停止输入时自动跟踪，并提供项目、文件、分支、提交/PR、功能等的详细指标。
5. Quokka.js
Quokka.js 是用于快速 JavaScript / TypeScript 原型设计的开发人员生产力工具。运行时值会在您键入时更新并显示在您的代码旁边。它使 JavaScript / TypeScript 的原型设计、学习和测试速度更快。
6. Chrome 调试器
在 Chrome 浏览器或任何其他支持 Chrome 调试器协议的目标中调试您的 JavaScript 代码
7. 剪贴板 历史
保留复制项目的 历史 记录，并在需要时重新粘贴。
8. 配置文件切换器
允许您在您创建的不同配置文件之间切换。此扩展允许您表征各种设置配置文件，而无需在它们之间进行太多拉伸切换。
以上插件下载：八个提高效率的VSCode必备扩展插件
vscode使用教程是？
vscode使用教程：
安装：
安装的东西没什么好说的，自行下载安装吧，伙计。
配置：
用户配置：
vscode的用户配置分3个级别，分别是默认配置、全局配置和工作区配置，优先级也依次递增。对于团队项目，一些规范可以通过项目目录下建一个.vscode/setting.json文件进行配置。
快捷键绑定：
参考官方文档，文档中列出了所有指令对应的快捷键。快捷键我只修改了两个与系统软件冲突的。
代码片段：
这个功能很像webstorm的live template的功能，虽然提示的时候没有webstorm那么精准和顺手，不过总的来说，够用。
设置语法遵循TextMate代码片段语法，你可以通过安装别人写好的snippet插件，如果别人写的snippet你用得不爽，那么自己写也简单。
之前使用这个代码片段有个痛点就是只能用方向键上下选择提示，如果能使用ctrl+n/p上下选择的话就更舒服了，没想到现在已经支持了。
另外，有没有人知道怎么设置代码提示内容，比如输入result提示了XPathResult是什么鬼。
插件：
4个月前刚知道vscode的时候，那时感觉插件还没有那么多，现在重新看了一下，真是应有尽有。牛逼啊！
这里介绍几个我用过觉得不错的插件
用户配置同步 Visual Studio Code Settings Sync。Git 历史 Git History。
文件图标 vscode-icons。缩进辅助线 Guides。
Visual Studio Code（以下简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。
内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。
适合前端开发人员的vscode扩展插件有哪些？
1，HTML snippets(Visual Studio Code HTML snippets)
这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ullia 的格式表示，按下回车后就能看到你需要的嵌套。还有一点，这个扩展已经包括所有的 HMTL5 片段。
2，JavaScript (ES6) code snippets
几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 .ts, .tsx 和 .jsx 文件。
扩展中有很多快捷缩写，比如想要调用 export default class ClassName{}，输入 ecl 按下空格即可。
3，CSS Peek
既然已经分别介绍了 HTML 和 JS 的助手，我们也不能落下 CSS。CSS Peek 是一个支持 .html 和 .js 文件的扩展，它能帮助开发者快速找到和查看选定类或 id 所用的样式。对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。
4，Angular/React/Vue
既然提到了代码片段，我们最好也提一下每个框架下的不同扩展。
对 AngularJS 来说，Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展，它为我们提供 Typescript 和 HTML 的代码片段。
对于 React.js 框架，ES7 React/Redux/GraphQL/React-Native snippets 是一个优秀的扩展，它使用 ES7 提供 React 和 Redux 的代码片段，用法和 Javascript snippets 类似，都是按空格键。
对 Vue.js 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等。
5，ESLint
如果你想要写出友好，易读，干净的代码，我建议你在 VSC 中安装一个 ESLint 扩展，它会帮助你持续养成好的编码习惯，比如缩进等。
6，Prettier 代码格式工具
说到漂亮整洁的代码，Prettier 听名字你就值得拥有。尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。
7，GitLens
VSC 是整合了 git 功能的，通过安装 GitLens 这个功能将会更强大，它能让你看到每一行代码是由谁在什么时候写的，并且快速查看代码提交详情，在团队协作中这个扩展很有用。
8，Auto import 自动导入包
Auto import 是一个自动导入包扩展。如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好。
9，Path autocomplete 路径自动补全
提到了导入的问题，另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。使用时，输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。当文件目录繁杂时，这个扩展真的是很好用，它为你省去了很多一层一层刨开目录的痛苦。
10，Bracket Pair Colorizer 括号着色器
括号着色器能让我们一眼看出当前代码块的反括号在哪里。有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。
11，Indenticator 缩进指示器
Indenticator 可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。
12，Debugger for Chrome 调试器
放在最后的是重磅级的调试扩展 Debugger for Chrome。这个插件能让你在 VSC 里面直接调试 JS 文件，效果和 Chrome 的控制台中差不多，让你不用打开浏览器就直接打断点。 （BY三人行慕课）
vs code 开发react用什么插件
使用VSCode开发React-Native是个不错的选择，因为这个编辑器十分简洁、流畅，并且微软官方提供了React Native Tools插件，支持代码高亮、debug以及代码提示等十分强大的功能，并且VSCode本身的代码跳转十分优秀。但是我下载了此插件，发现其他功能正常，唯独代码没法正确提示，右下角也没有显示salsa。经过我的不懈Google以及查看官方文档：JavaScript in VS Code，最终找到了替代解决方案。
名称 简述
Auto Close Tag 自动闭合HTML标签
Auto Import Typescript自动import提示
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Beautify css/sass/scss/less css/sass/less格式化
Better Comments 编写更加人性化的注释
Bookmarks 添加行书签
Can I Use HTML5、CSS3、SVG的浏览器兼容性检查
Code Runner 运行选中代码段（支持大量语言，包括Node）
Code Spellchecker 单词拼写检查
CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎
Color Highlight 颜色值在代码中高亮显示
Color Info 小窗口显示颜色值，rgb,hsl,cmyk,hex等等
Color Picker 拾色器
Document This 注释文档生成
ESLint ESLint插件，高亮提示
EditorConfig for VS Code EditorConfig插件
Emoji 在代码中输入emoji
File Peek 根据路径字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代码段
Git Blame 在状态栏显示当前行的Git信息
Git History(git log) 查看git log
GitLens 显示文件最近的commit和作者，显示当前行commit信息
Guides 高亮缩进基准线
Gulp Snippets Gulp代码段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
htmltagwrap 包裹HTML
Import Cost 行内显示导入（import/require）的包的大小
Indenticator 缩进高亮
IntelliSense for css class names css class输入提示
JavaScript (ES6) code snippets ES6语法代码段
JavaScript Standard Style Standard风格
JSON to TS JSON结构转化为typescript的interface
JSON Tools 格式化和压缩JSON
Less IntelliSense less变量与混合提示
Lodash Lodash代码段
Log Wrapper 生产打印选中变量的代码
MochaSnippets Mocha代码段
Node modules resolve 快速导航到Node模块
Code Outline 展示代码结构树
Output Colorizer 彩色输出信息
Partial Diff 对比两段代码或文件
Path Autocomplete 路径完成提示
Path Intellisense 另一个路径完成提示
PostCss Sorting css排序
Prettify JSON 格式化JSON
Project Manager 快速切换项目
Quokka.js 不需要手动运行，行内显示变量结果
REST Client 发送REST风格的HTTP请求
React Native Storybooks storybook预览插件，支持react
React Playground 为编辑器提供一个react组件运行环境，方便调试
React Standard Style code snippets react standar风格代码块
Sass sass插件
Settings Sync VSCode设置同步到Gist
Sort Typescript Imports typescript的import排序
Sort lines 排序选中行
String Manipulation 字符串转换处理（驼峰、大写开头、下划线等等）
Syncing vscode设置同步到gist
TODO Parser Todo管理
TS/JS postfix completion ts/js前缀提示
TSLint TypeScript语法检查
Test Spec Generator 测试用例生成（支持chai、should、jasmine）
TypeScript Import TS自动import
TypeSearch TS声明文件搜索
Types auto installer 自动安装@types声明依赖
VSCode Great Icons 文件图标拓展
Version Lens package.json文件显示模块当前版本和最新版本
View Node Package 快速打开选中模块的主页和代码仓库
VueHelper Vue2代码段（包括Vue2 api、vue-router2、vuex2）
filesize 状态栏显示当前文件大小
ftp-sync 同步文件到ftp
gitignore .gitignore文件语法
htmltagwrap 快捷包裹html标签
language-stylus Stylus语法高亮和提示
markdownlint Markdown格式提示
npm Intellisense 导入模块时，提示已安装模块名称
npm 运行npm命令
stylelint css/sass/less代码风格
vetur 目前比较好的Vue语法高亮
vscode-database 操作数据库，支持mysql和postgres
vscode-icons 文件图标，方便定位文件
vscode-random 随机字符串生成器
vscode-styled-components styled-components高亮支持
vscode-styled-jsx styled-jsx高亮支持。
