在使用vscode的时候，被其高度个性化和玲琅满目的插件吸引住，整合了网络上很多大佬总结出来的配置和插件，再加上自己的一些使用顺手的，整合出这篇文章。
配置篇
vscode的配置内容附在文末
插件篇
通用插件
Beautify
格式化代码的工具
Bracket Pair Colorizer
让括号拥有独立的颜色，易于区分。可以配合任意主题使用
Code Runner
node，python等代码不必使用命令行即可运行
Filesize
在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
Open In Browser
Vscode没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在浏览器内浏览文件的选项
Path Intellisense
自动路径补全
Web前端
Change Case
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
CSS Peek
使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
Cssrem
将css中的px自动转换为rem
SVG Viewer
无需离开编辑器，便可以打开SVG文件并查看他们。同时，他还包含了用于转换为PNG格式和生成数据URI模式的选项。
Faker
使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。
HTML Boilerplate
通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
HTML CSS Support
让HTML标签上写class智能提示当前项目所支持的格式
新版已经支持css文件检索
HTMLHint
html代码检测
HTML Snipprts
超级实用且初级的H5代码片段以及展示
jQuery Code Snippets
热爱使用jQuery必安
Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！
Quokka
Quokka是一个调试工具插件，能够根据正在写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。在使用JSX或Typescript项目中，能够开箱即用。
Regex Previewer
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式应用在任何打开的文件上，并高亮所有的匹配项。
TODO Highhlight
这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。
Vue
vetur
语法高亮，智能感知，Emmets等
Git
Git History
git提交历史
GitLens
丰富的git日志插件
主题
One Dark Pro
源于Atom，自用
Material
冷门，好看，使用，停更已久
Dracula
Vscode上最漂亮的主题（网上大多数这么说）
Aglia
图标
vscode-icon
Material Icon
配置
1 | { |
2 | "workbench.iconTheme": "material-icon-theme", // 图标主题 |
3 | "editor.tabSize": 2, |
4 | "editor.wordWrap": "on", |
5 | "files.autoSave": "afterDelay", //自动保存 |
6 | "editor.cursorStyle": "underline", //光标样式 |
7 | "vetur.format.defaultFormatter.html": "prettyhtml", //vetur插件格式化html |
8 | "editor.formatOnPaste": true, // |
9 | "eslint.autoFixOnSave": true, //文件保存自动格式化代码 |
10 | //定义ESLint代码规范 |
11 | "eslint.validate": [ |
12 | "javascript", |
13 | "javascriptreact", |
14 | "html", |
15 | "vue", |
16 | { |
17 | "language": "html", |
18 | "autoFix": true |
19 | }, |
20 | { |
21 | "language": "vue", |
22 | "autoFix": true |
23 | } |
24 | ], |
25 | "files.associations": { |
26 | "*.vue": "vue" |
27 | }, |
28 | |
29 | "editor.tabCompletion": "on", |
30 | "explorer.confirmDelete": false, |
31 | "workbench.statusBar.feedback.visible": false, |
32 | "breadcrumbs.enabled": true, |
33 | "workbench.editor.tabCloseButton": "left", |
34 | "workbench.editor.tabSizing": "shrink", |
35 | "window.titleBarStyle": "native", |
36 | "workbench.colorTheme": "Sublime Material Theme - Dark", // 工作区颜色主题 |
37 | "editor.formatOnType": true |
38 | } |
