VSCode 拓展推荐

使用说明

相似功能的插件，不推荐全都装上，请挑选一个使用
本列表所有插件均已测试使用过，但不代表不存在问题
任何插件本身的问题，请到对于代码仓库提交 issue

插件

名称	简述
Auto Close Tag	自动闭合 HTML 标签
Auto Import	import 提示
Auto Rename Tag	修改 HTML 标签时，自动修改匹配的标签
Babel JavaScript	babel 插件，语法高亮
Babelrc	.babelrc 文件高亮提示
Beautify css/sass/scss/less	css/sass/less 格式化
Better Align	对齐赋值符号和注释
Better Comments	编写更加人性化的注释
Bookmarks 添加行书签
Bracket Pair Colorizer	用不同颜色高亮显示匹配的括号
Can I Use	HTML5、CSS3、SVG 的浏览器兼容性检查
Code Outline	展示代码结构树
Code Runner	运行选中代码段（支持多数语言）
Code Spell checker	单词拼写检查
CodeBing	快速打开 Bing 并搜索，可配置搜索引擎
Color Highlight	颜色值在代码中高亮显示
Color Info	小窗口显示颜色值，rgb,hsl,cmyk,hex 等等
Color Picker	拾色器
CSS-in-JS	CSS-in-JS 高亮提示和转换
Dash	集成 Dash
Debugger for Chrome	调试 Chrome
Document This	注释文档生成
DotENV	.env 文件高亮
EditorConfig for VS Code	EditorConfig 插件
Emoji	在代码中输入 emoji
endy	将输入光标跳转到当前行最后面
ESLint	ESLint 插件，高亮提示
File Peek	根据路径字符串，快速定位到文件
filesize	状态栏显示当前文件大小
Find-Jump	快速跳转到指定单词位置
Font-awesome codes for html	FontAwesome 提示代码段
ftp-sync	同步文件到 ftp
Git Blame	在状态栏显示当前行的 Git 信息
Git History(git log)	查看 git log
gitignore	.gitignore 文件语法
GitLens	(Git 增强)显示文件最近的 commit 和作者，显示当前行 commit 信息
GraphQL for VSCode	graphql 高亮和提示
Guides	高亮缩进基准线
Gulp Snippets	Gulp 代码段
HTML CSS Class Completion	CSS class 提示
HTML CSS Support	css 提示（支持 vue）
HTMLHint	HTML 格式提示
htmltagwrap	快捷包裹 html 标签
htmltagwrap	包裹 HTML
Import Beautify import	分组、排序、格式化
Import Cost	行内显示导入（import/require）的包的大小
Indenticator	缩进高亮
IntelliSense for css class names	css class 输入提示
JavaScript (ES6) code snippets	ES6 语法代码段
JavaScript Standard Style	Standard 风格
JS Refactor	代码重构工具，提取函数、变量重命名等等
JSON to TS	JSON 结构转化为 typescript 的 interface
JSON Tools	格式化和压缩 JSON
jumpy	快速跳转到指定单词位置
language-stylus	Stylus 语法高亮和提示
Less IntelliSense	less 变量与混合提示
Lodash	Lodash 代码段
Log Wrapper	生产打印选中变量的代码
markdownlint	Markdown 格式提示
MochaSnippets	Mocha 代码段
Node modules resolve	快速导航到 Node 模块
npm	运行 npm 命令
npm Intellisense	导入模块时，提示已安装模块名称
Output Colorizer	彩色输出信息
Partial Diff	对比两段代码或文件
Path Autocomplete	路径完成提示
Path Intellisense	另一个路径完成提示
Polacode	将代码生成图片
PostCss Sorting	css 排序
Prettier - Code formatter	prettier 官方插件
Prettify JSON	格式化 JSON
Project Manager	快速切换项目
Quokka.js	不需要手动运行，行内显示变量结果
React Native Storybooks	storybook 预览插件，支持 react
React Playground	为编辑器提供一个 react 组件运行环境，方便调试
React Standard Style code snippets	react standar 风格代码块
REST Client	发送 REST 风格的 HTTP 请求
Sass	sass 插件
Settings Sync	VSCode 设置同步到 Gist
Sort lines	排序选中行
Sort Typescript Imports	typescript 的 import 排序
String Manipulation	字符串转换处理（驼峰、大写开头、下划线等等）
stylelint	css/sass/less 代码风格
SVG Viewer	SVG 查看器
Syncing	vscode 设置同步到 gist
Test Spec Generator	测试用例生成（支持 chai、should、jasmine）
TODO Parser	Todo 管理
TS/JS postfix completion	ts/js 后缀提示
TSLint	TypeScript 语法检查
Types auto installer	自动安装@types 声明依赖
TypeScript Hero	TypeScript 辅助插件，管理 import、outline 等等
TypeScript Import	TS 自动 import
TypeScript Import Sorter	import 整理排序
Typescript React code snippets	React Typescript 代码段
TypeSearch	TS 声明文件搜索
Version Lens	package.json 文件显示模块当前版本和最新版本
vetur	目前比较好的 Vue 语法高亮
View Node Package	快速打开选中模块的主页和代码仓库
VS Live Share	实时多人协助
VSCode Great Icons	文件图标拓展
vscode-database	操作数据库，支持 mysql 和 postgres
vscode-icons	文件图标，方便定位文件
vscode-random	随机字符串生成器
vscode-spotify	集成 spotify，播放音乐
vscode-styled-components	styled-components 高亮支持
vscode-styled-jsx	styled-jsx 高亮支持
Vue TypeScript Snippets	Vue Typescript 代码段
VueHelper	Vue2 代码段（包括 Vue2 api、vue-router2、vuex2）
Wallaby.js	实时测试插件

{
    "breadcrumbs.enabled": true,
    "editor.tabSize": 2,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.renderCharacters": false,
    "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "editor.fontLigatures": true,
    "explorer.confirmDragAndDrop": false,
    "extensions.autoUpdate": false,
    "files.insertFinalNewline": true,
    "git.autofetch": true,
    "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true
    },
    "typescript.locale": "en",
    "window.titleBarStyle": "custom",
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "window.zoomLevel": 1,
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "Plastic - deprioritised punctuation",
    "workbench.iconTheme": "vscode-great-icons",
    "workbench.startupEditor": "newUntitledFile",
    "eslint.autoFixOnSave": true,
    "eslint.validate": ["javascript", "javascriptreact", "vue"],
    "vsicons.projectDetection.autoReload": true,
    "vsicons.dontShowNewVersionMessage": true,
    "tslint.autoFixOnSave": true,
    "debugwrapper.wrappers": {
        "default": "console.log('$eSEL', $SEL)"
    },
    "prettier.tslintIntegration": true,
    "cSpell.userWords": ["Unmount"],
    "jest.autoEnable": false
}

Visual Studio Code 最好的功能、插件和设置

让 create-react-app 支持 do 表达式

1.先安装@babel/plugin-proposal-do-expressions
2.在.babelrc里配置：

1	"plugins": ["@babel/plugin-proposal-do-expressions"]

3.vsCode 不支持 ES6 do{}表达式，这样设置即可：

全局安装：npm install -g eslint
安装 babel-eslint: npm install –save-dev babel-eslint
安装 eslint-plugin-react(如果你用 react 的话): npm install –save-dev eslint-plugin-react
创建’.eslintrc’文件

{
    "env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jest": true,
        "jquery": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "arrowFunctions": true,
            "binaryLiterals": true,
            "blockBindings": true,
            "classes": true,
            "defaultParams": true,
            "destructuring": true,
            "forOf": true,
            "generators": true,
            "modules": true,
            "objectLiteralComputedProperties": true,
            "objectLiteralDuplicateProperties": true,
            "objectLiteralShorthandMethods": true,
            "objectLiteralShorthandProperties": true,
            "octalLiterals": true,
            "regexUFlag": true,
            "regexYFlag": true,
            "spread": true,
            "superInFunctions": true,
            "templateStrings": true,
            "unicodeCodePointEscapes": true,
            "globalReturn": true,
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": ["react"],
    "rules": {
        "strict": 0
    }
}

关闭 vscode 的语法验证:”javascript.validate.enable” : false
vscode 主题背景设置

JavaScript 开发者 10 种必备 VS Code 扩展

代码片段扩展

当您第一次安装 VS Code 时，它附带了几个 JavaScript 和 Typescript 的代码片段功能。在开始编写现代 JavaScript 之前，您需要一些额外的代码片段来帮助您快速编写重复的 ES6 / ES7 代码：

VS Code JavaScript(ES6) snippets ：目前最流行的，迄今为止安装量超过 120 万。此扩展为 JavaScript ， TypeScript ，HTML，React和Vue扩展提供 ES6 语法支持。
JavaScript Snippet Pack：JavaScript 有用的代码片段集合。
Atom JavaScript Snippet：从 atom/language-javascript 扩展移植的JavaScript代码段。
JavaScript Snippets：一系列ES6片段。此扩展包含 Mocha，Jasmine和其他BDD测试框架的片段。

注：另外你也可以根据自己的习惯创建代码片段，请参阅如何在 Visual Studio Code 中创建代码片段。

语法扩展

VS Code 为 JavaScript 代码提供了非常好的语法高亮显示。您可以通过安装主题来更改颜色。但是，如果您想要增强代码的可读性，则需要语法高亮显示扩展。以下是其中几个：

JavaScript Atom Grammar：此扩展使用 Atom 编辑器中的 JavaScript 语法替换 Visual Studio Code 中的 JavaScript 语法。
Babel JavaScript：支持 ES201x JavaScript，React，FlowType和GraphQL代码的语法高亮显示。
DotENV：支持.env文件语法高亮显示。如果您正在使用Node，请使用方便。

代码检测扩展

编写有效的 JavaScript 代码时，需要一个能够为所有团队成员强制执行特定编码风格的检测工具(linter)。 ESLint 是最受欢迎的，因为它支持许多编码风格，包括 Standard ，Google 和 Airbnb 。以下是 Visual Studio Code 最流行的 linter 插件：

ESLint ：此扩展将 ESLint 集成到 VS Code 中。它是最受欢迎的 linter 扩展，迄今为止安装量超过670万。规则在 .eslintrc.json 中配置。
JSHint ：JSHint 的代码检查器扩展。在项目的根目录使用 .jshintrcfile 进行配置。
JavaScript Standard Style ：零配置和严格规则的检测工具。执行 StandardJS 规则。
JSLint ：JSLint的 linter 扩展。

如果您想了解可用的检测工具(linter) 及各自的优缺点，请查看我们对 JavaScript linting 工具的比较。

Node 扩展

每个 JavaScript 项目都需要至少一个 Node 包，除非你是一个喜欢艰苦工作的人。以下是一些 VS Code 扩展，可帮助您更轻松地使用 Node 模块。

npm ：使用 package.json 验证已安装的软件包。确保已安装的软件包版本号正确，高亮显示 package.json 中缺少的已安装软件包以及尚未安装的软件包。
Node.js Modules IntelliSense：自动补全 import 语句中的 JavaScript 和 TypeScript 模块。源码：vscode-node-module-intellisense
Path IntelliSense ：它和 Node 其实并不相关，但你肯定需要对本地文件的智能提示，这个扩展将自动补全文件名。
Node exec ：允许您使用Node.js执行当前文件或您选择的代码。
View Node Package ：使用此扩展快速查看 Node 包源，允许您直接从 VS Code 打开 Node 包仓库库/文档。
Node Readme ：快速打开npm包文档。
Search node_modules ：此扩展允许您搜索 node_modules 文件夹，该文件夹不在默认的搜索范围内。源码：vscode-search-node-modules。
Import Cost ：显示导入的包的大小。源码：import-cost。

代码格式化扩展

偶尔，您会发现自己格式化的代码并非以首选的编码风格编写。为了节省时间，您可以以下任何的 VS Code 扩展来快速格式化和重构现有代码：

Beatufy ：一个支持 JavaScript，JSON，CSS 和 HTML 的 jsBeautifier(代码美化) 扩展。可以通过 .jsbeautifyrc 文件进行自定义。迄今为止最流行的格式化工具，安装量为 230 万次。
Prettier Code Formatter ：一个扩展，支持使用Prettier（一种固定代码格式化程序）格式化JavaScript，TypeScript和CSS。迄今已安装超过150万。
JS Refactor ：提供了许多用于重构 JavaScript 代码的实用程序和操作，例如提取变量/方法，将现有代码转换为使用箭头函数或模板字面量以及导出函数。
JavaScript Booster ：一个牛逼的代码重构工具。具有多种编码操作，例如将 var 转换为 const 或 let ，删除冗余的 else语句，以及合并声明和初始化。很大程度上受到 WebStorm 的启发。源码：vscode-javascript-booster。

浏览器扩展

除非你是在用 JavaScript 编写控制台程序，否则您很可能会在浏览器中执行 JavaScript 代码。这意味着,您需要经常刷新页面来查看您所做的每次代码更新的效果。这里有一些工具可以显着减少重复过程的开发时间，而不是每次都手动刷新浏览器：

Debugger for Chrome ：在 Chrome 中轻松调试 JavaScript（通过在编辑器中设置断点）。源码：vscode-chrome-debug。
Live Server ：具有静态和动态页面的实时重新加载功能的本地开发服务器。源码：vscode-chrome-debugvscode-live-server。
Preview on Web Server ：提供web服务器和实时预览功能。
PHP Server ：对于测试仅需要在客户端运行的 JavaScript 代码非常有用。。
Rest Client ：您可以安装此工具以在编辑器内交互式运行HTTP 请求，而不是使用浏览器或 CURL 程序来测试 REST API 端点。

框架类扩展

对于大多数项目，您需要一个合适的框架来构建代码并缩短开发时间。 VS Code 通过扩展支持大多数主流框架。但是，仍然有许多已建立的框架尚未完全支持。以下是一些提供重要功能的 VS Code 扩展。

Angular 6 ：提供 Angular 6 的代码片段。支持 Typescript，HTML，Angular Material ngRx，RxJS 和 Flex Layout。到目前为止，已安装了220多万个安装和 172 个 Angular 代码片段。
Angular v5 snippets ：为 TypeScript，RxJS，HTML 和 Docker 文件提供 Angular 代码片段。迄今为止已有 270多万个安装量。
React Native/React/Redux snippets for es6/es7 ：为所有这些框架提供 ES6 / ES7 语法的片段。
React Native Tools ：为 React Native 框架提供智能提示，命令行工具和调试功能。
Vetur ：为Vue框架提供语法高亮，代码片段，Emmet，linting（代码检测），格式化，智能提示和调试支持。它附带了在 GitBook 上发布的使用文档。
Ember ：为Ember提供命令支持和智能提示。安装后，所有 ember cli 命令都可以通过 VS Code 自己的命令行列表中使用。
Cordava Tools ：支持 Cordova 插件和 Ionic 框架。为基于 Cordova 的项目提供智能提示，调试和其他支持功能。
jQuery Code Snippets ：提供了超过130个jQuery的代码片段，使用 jq 前缀来激活。

测试类扩展

测试是软件开发的关键环节，特别是对于处于生产阶段的项目。您可以全面了解 JavaScript 的测试，并且你可以通过阅读我们的指南：JavaScript测试：单元测试 vs 功能测试 vs 集成测试来获得更多不同类型的测试的信息。

Mocha sidebar ：为使用 Mocha 库进行测试的项目提供支持。此扩展可帮助您直接在代码上运行测试，并将错误信息以装饰器形式显示。
ES Mocha Snippets ：提供 ES6 语法的 Mocha 代码片段。这个插件的重点在于利用箭头函数，尽可能减少花括号的使用，保持代码的紧凑。可通过设置允许使用分号。
Jasmine Code Snippets ：针对Jasmine测试框架的代码片段。
Protractor Snippets ：Protractor 框架的端到端测试片段。支持 JavaScript 和 Typescript 。
Node TDD ：为Node和JavaScript项目的测试驱动开发提供支持。可以在更新源时触发自动测试构建。源码：node-tdd 。

还有一些非常棒的扩展

我只是将下一批 VS Code 扩展归入到 “awesome” 类别中，因为它最能描述它们！

Quokka.js ：一个很棒的调试工具，为 JavaScript 代码提供快速原型操作。附带优秀的文档。
Paste as JSON ：快速将 JSON 数据转换为 JavaScript 代码。源码：quick-type。
Code Metrics ：这是计算 JavaScript 和 TypeScript 代码复杂性的另一个很棒的扩展。源码：codemetrics 。

扩展包

现在我们已经进入最后一个类别，我想告诉您，VS Code 市场有一个扩展包类别。从本质上讲，它们是相关联的一些 VS Code插件的集合，打成一个包，方便安装。这里有些较好的：

Nodejs Extension Pack ：这个包里包含了 ESLint、npm、JavaScript(ES6) 代码片段、搜索 node_modules、NPM IntelliSense 和路径智能提示。
VS Code for Node.js – Development Pack ：包含这个有 NPM 智能提示，ESLint，Chrome 调试器，代码指标，Docker和导入包的字节开销。
Vue.js Extension Pack ：Vue 和 JavaScript 扩展的集合。它目前包含大约 12 个 VS Code 扩展，其中一些在这里没有提到，例如 auto-rename-tag 和 auto-close-tag。
Ionic Extesion Pack：此包包含许多用于Ionic，Angular，RxJS，Cordova和HTML开发的 VS Code 扩展。