VSCode 的安装与配置
安装
从官网下载安装包
安装时把以下选项选中：
使用
-
假设目录名为 demo（目录名不要中文）
-
右键点击该目录，
open with code -
使用
Ctrl+Shift+E打开资源管理器，在 demo 目录里新建 HTML 文件，文件名为 index.html -
在 index.html 依次输入：英文感叹号、回车 键，即可看到一个完整的 HTML 页面
这种快捷写法叫做 Emmet，目前所有的前端编辑器都支持 Emmet
关于 Emmet 的更多快捷写法，见：
-
官网的视频介绍
-
Emmet 作弊表
配置
VSCode 配置方式就写编辑一个配置文件，打开「文件 - 首选项 - 设置」，对应快捷键为 `Ctrl + ,'
插件安装
VSCode 自带 Emmet、Git 继承和 JS 调试功能，已经十分完善了，但是还是有一些特殊的需求，这个时候我们就可以安装第三方插件了。
第三方插件汇总
vue vs code Extension pack
vue vs code Extension pack
vue vscode snippets
vue vscode snippets
Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java,
Tabnine
编辑期主题
Material Theme
用于生成文件头部注释和函数注释的插件
koroFileHeader
使用：
文件头部添加注释:ctrl+alt+i
在光标处添加函数注释:ctrl+alt+t
支持一键添加佛祖保佑永无BUG、神兽护体等注释图案Ctrl+Shift+P输入codeDesign开启该工具
代码分享/截图工具教程
Polacode-2020
使用：
Ctrl+Shift+P
输入Polacode开启该工具
浏览器中打开
open in browser
按
Ctrl + Shift + X打开扩展面板，然后输入open in browser，点击第一个结果的「安装」按钮，稍等片刻就安装好了然后在任意 HTML 文件右键，就可以看到
Open In Default Browser和 Open In Other Browser这两个按钮了，点就试试看。
css样式书写提示的插件及使用方法
HTML to CSS autocompletion 外联样式提示插件
css-class-intellisense 内联样式提示插件
css tree快速生成样式树
css Tree
插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法支持
VS Code JavaScript(ES6) snippets
用于格式化代码，右击格式化代码
beautify
提供了有用的JavaScript代码片段集合
JavaScript Snippet Pack
移植自Atom的JavaScript插件。
Atom JavaScript Snippet
提供了ES6代码片段的集合。它包含对Mocha、Jasmine等其他BBD(Behavior-Driven Development)测试框架的支持
JavaScript Snippets
它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的
JavaScript Atom Grammar
支持ES201X、React、FlowType以及GraphQL的语法高亮。
Babel JavaScript
语法高亮插件支持
.env文件语法高亮，在你使用Node时会非常有用。DotENV
这个插件把ESLint集成到VS Code中。它是最流行的代码检测插件，已有超过670万下载量。它的规则在
.eslintrc.json里配置。 ESLint
基于JSHint的代码检测插件。在项目跟目录下使用
.jshintrc文件作为其配置。JSHint
零配置和严格规则的代码检测，强制使用StandardJS规则
JavaScript Standard Style
用
package.json来校验安装的npm包，确保安装包的版本正确，对缺少package.json文件的包或者未安装的包给出高亮提示。npm
提供JavaScript和TypeScript导入声明时的自动补全。源码：vscode-node-module-intellisense。
Node.js Modules IntelliSense
它其实与Node没有关系，但是你肯定需要对本地文件的智能提示，这个插件会自动补全文件名。
Path IntelliSense
允许你用Node执行当前文件或者选中的代码
Node exec
利用此插件可快速查看Node包源码，让你直接在VS Code中打开Node包的代码库或文档
View Node Package
通常
node_modules文件夹不在默认的搜索范围内，这个插件允许你搜索它。源码：vscode-search-node-modules。Search node_modules
显示导入的包的大小。源码：import-cost。
Import Cost
利用Prettier的支持JavaScript、TypeScript和CSS的插件，目前有超过150万的下载量
Prettier Code Formatter
提供许多重构JavaScript代码的实用方法和操作，例如抽取变量和方法，把现有代码转为使用箭头函数和模板字符串的等价形式，导出函数等
JS Refactor
一款了不起的代码重构工具。拥有需要代码操作，比如把
var转为const或者let，去除多余的else语句，合并声明和初始化。其灵感大量源于WebStorm的启发。源码：vscode-javascript-booster。JavaScript Booster
在编辑器中打断点，让你轻松地在Chrome里调试JavaScript。源码：vscode-chrome-debug
Debugger for Chrome
开启本地开发时服务器，为静态和动态页面提供实时刷新功能。源码：vscode-chrome-debugvscode-live-server。
Live Server
提供web服务器和实时预览功能
Preview on Web Server
相较于用浏览器或者一个CURL程序来测试你的REST API端点，你可以安装这个工具，直接在编辑器里相互性地发HTTP请求。
Rest Client
提供对这些框架的ES6/ES7语法的代码片段。
React Native/React/Redux snippets for es6/es7
为React Native框架提供代码智能提示、命令行工具和调试特性
React Native Tools
为Vue框架提供语法高亮、代码片段、Emmet、代码检测、智能提示和调试支持。它带有很好的发布在GitBook上的文档。
Vetur
为Ember提供了命令行支持和智能提示。安装完后，所有
ember cli的命令可直接在VS Code自己的命令行列表中使用。Ember
支持Cordava插件和Ionic框架，提供基于Cordova的项目的智能提示、调试已经其他特性的支持。
Cordava Tools
提供了超过130个jQuery的代码片段，使用
jq前缀来激活jQuery Code Snippets
利用Mocha库为项目提供单元测试。这个框架帮你直接在代码里跑测试，把错误信息以装饰器形式显示出来。
Mocha sidebar
针对Jasmine测试框架的代码片段。
Jasmine Code Snippets
针对Protractor端到端测试框架的代码片段。支持JavaScript和TypeScript。
Protractor Snippets
为Node和JavaScript项目提供测试驱动开发的支持。能在源码的更新后，立即触发自动化测试的构建。源码：
node-tdd Node TDD
非常厉害的调试工具，为JavaScript提供了快速构建原型的演练场，并且附带有很好的文档。
Quokka.js
快速地将JSON数据转为JavaScript代码。源码：quick-type。
Paste as JSON
这是另一个非常棒的插件，计算JavaScript和TypeScript代码中复杂度。源码：codemetrics。
Code Metrics
这个包里有ESLint、npm、JavaScript(ES6) snippets、Search node_modules、NPM IntelliSense和Path IntelliSense。
Nodejs Extension Pack
这个包含NPM IntelliSense、ESLint、Debugger for Chrome、Code Metrics、Docker和Import Cost
VS Code for Node.js - Development Pack
一些Vue和JavaScript插件的集合。目前它含有12个VS Code的插件，有一些之前我们没有提到的，比如auto-rename-tag和auto-close-tag。
Vue.js Extension Pack
SpreadJS纯前端表格组件
它是一款拼写检查程序，可以为开发者报告一些常见的拼写错误。它很适合驼峰式代码。
Code Spell Checker
GitLens 可增强 Visual Studio Code 中内置的 Git 功能
GitLens
该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标，让你更容易地识别文件。
vscode-icons
vscode-icons-mac
它能帮你实时把 SASS/SCSS 文件编译/转译成 CSS 文件，并且提供在线浏览器重载。
Live Saas Compiler
它可以让你在编辑器中打开一个用于调试的真正的浏览器预览。
Browser Preview
这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。
Bracket Pair Colorizer
VSCodeVim 是一个用于 Visual Studio Code 的 Vim 仿真器，为你的文本编辑器带来 Vim 的强大功能。
Vim
高亮显示代码中的 TODO、FIXME 及其他注解。
TODO Highlight
这个扩展可以风格化在你的文件中找到的 css/web 颜色，所以你无需打开页面就能看到它们是什么颜色。
Color Highlight
自动闭合HTML/XML标签
Auto Close Tag
自动完成另一侧标签的同步修改
Auto Rename Tag
智能提示CSS类名以及id
HTML CSS Support
智能提示HTML标签，以及标签含义
HTML Snippets
实时预览markdown，markdown使用者必备
Markdown Preview Enhanced
markdown语法纠错
markdownlint
个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致
Material Icon Theme
React/Redux/react-router语法智能提示
React/Redux/react-router Snippets
Typescript自动import提示
Auto Import
Auto Import
css/sass/less格式化 Beautify css/sass/scss/less
对齐赋值符号和注释
Better Align
编写更加人性化的注释
Better Comments
添加行书签
Bookmarks
HTML5、CSS3、SVG的浏览器兼容性检查
Can I Use
Bookmarks在VSCode中弹出浏览器并搜索，可编辑搜索引擎 CodeBing
小窗口显示颜色值，rgb,hsl,cmyk,hex等等 Color Info
拾色器 Color Picker
集成Dash Dash
注释文档生成 Document This
EditorConfig插件 EditorConfig for VS Code
在代码中输入emoji Emoji
根据路径字符串，快速定位到文件 File Peek
在状态栏显示当前行的Git信息 Git Blame
查看git log Git History(git log)
高亮缩进基准线 Guides
Gulp代码段 Gulp Snippets
CSS class提示 HTML CSS Class Completion
HTML格式提示 HTMLHint
包裹HTML htmltagwrap
缩进高亮 Indenticator
Standard风格 JavaScript Standard Style
JSON结构转化为typescript的interface JSON to TS
格式化和压缩JSON JSON Tools
less变量与混合提示 Less IntelliSense
Lodash代码段 Lodash
生产打印选中变量的代码 Log Wrapper
快速导航到Node模块 Node modules resolve
彩色输出信息 Output Colorizer
对比两段代码或文件 Partial Diff
路径完成提示 Path Autocomplete
css排序 PostCss Sorting
格式化JSON Prettify JSON
快速切换项目 Project Manager
react standar风格代码块 React Standard Style code snippets
sass插件 Sass
typescript的import排序 Sort Typescript Imports
排序选中行 Sort lines
字符串转换处理（驼峰、大写开头、下划线等等） String Manipulation
SVG查看器 SVG Viewer
vscode设置同步到gist Syncing
Todo管理 TODO Parser
ts/js后缀提示 TS/JS postfix completion
TypeScript语法检查 TSLint
测试用例生成（支持chai、should、jasmine） Test Spec Generator
TS自动import TypeScript Import
TS声明文件搜索 TypeSearch
自动安装@types声明依赖 Types auto installer
文件图标拓展 VSCode Great Icons
package.json文件显示模块当前版本和最新版本 Version Lens
Vue2代码段（包括Vue2 api、vue-router2、vuex2） VueHelper
状态栏显示当前文件大小 filesize
同步文件到ftp ftp-sync
.gitignore文件语法 gitignore
Stylus语法高亮和提示 language-stylus
css/sass/less代码风格 stylelintstylelint
操作数据库，支持mysql和postgres vscode-database
随机字符串生成器 vscode-random
集成spotify，播放音乐
vscode-spotify
styled-components高亮支持
vscode-styled-components
styled-jsx高亮支持
vscode-styled-jsx
可以在vscode里编辑markdown的插件
One Monokai Theme
格式化css,less,scss文件
formate-custom: CSS/LESS/SCSS formatter
css自动转成less文件
Easy LESS
px自动转成rem
px to rem & rpx & vw (cssrem)
预览页面（ctrl+F1）
View In Browser
格式化
JS-CSS-HTML Formatter
bootstrap必备
Bootstrap 3 Snippets
vue必备
Vue 2 Snippets
一个萌萌的插件，可以自己设置vsc的背景图
background
快速插入测试用例数据，比如随机生成姓名、地址、图像、电话号码、经典的乱数假文段落。
Faker
快捷菜单栏——在浏览器中查看文件
Open-In-Browser
能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
Quokka
你可以通过html追踪至样式表中css类和ids定义的地方。
CSS Peek
生成html模版文件，你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。
HTML Boilerplate
此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项
SVG Viewer
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
Icon Fonts
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
Minify
虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。
Change Case
这是一个用于实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上，并高亮所有的匹配项。
Regex Previewer
当然，在众多的实用插件中，岂能少了漂亮的主题呢？你每天都会与你的 VSCode 编辑器进行“亲密的接触”，为何不把它打扮得更漂亮些呢？这里有一些帮助你更改侧边栏的配色方案，以及图标的相关主题，与大家分享：One Monokai、Aglia、One Dark、Material Icon
Themes
