前言

首次安装VS Code时，它附带了一些JavaScript和Typescript内置片段。片段可帮助您快速编写重复代码。但是，您可能会发现这些可能还不够。您可以轻松创建自己的扩展程序，也可以简单地安装包含一堆新的有用代码片段的扩展程序。如果要在建议的顶部显示摘要，一个快速提示是使用以下配置：

{"editor.snippetSuggestions": "top"
}

1. 插件包

VS Code的插件市场有一个类型叫插件包。它实际上已一个相互关联的插件的集合，方便一起安装，协同使用。

Nodejs Extension Pack：包含了ESLint、npm、JavaScript(ES6)代码片段、node_modules搜索、NPM智能提示和文件路径智能提示。
VS Code for Node.js – Development Pack ：NPM智能提示，ESLint，Chrome调试器，Code Metrics，Docker和导入包的开销计算。
Vue.js Extension Pack：包含大约12个VS Code插件，比如auto-rename-tag 和 auto-close-tag。
Ionic Extesion Pack：包含许多用于Ionic、Angular、RxJS、Cordova和HTML开发的插件。

2. Node插件

每一个JavaScript项目至少需要安装一个Node包。这里推荐一些针对Node的插件：

npm：使用package.json来验证已经安装的模块，确保已经安装的模块版本号正确，标记那些安装了但是没有在package.json列出来的包，以及那些还没有安装的包。
Node.js Modules IntelliSense：为JavaScript和TypeScript模块自动补全import语句。
Visual Studio IntelliCode：该插件基于 AI 自动学习并智能提示，甚至于编辑器会学习使用者的习惯，将最常用的提示放在最前面。

3. 代码片段(Snippet)插件

当你第一次安装VS Code，它会提供基本的针对JavaScript/TypeScript的代码片段支持。以下是一些针对JavaScript开发人员的最受欢迎的代码段扩展。但是，为简单起见，我建议您仅安装一个。

JavaScript（ES6）代码段：作者：Charalampos Karypidis。这是目前最受欢迎的javaScript代码段扩展，迄今为止安装次数超过3百万。该扩展为JavaScript，TypeScript，HTML，React和Vue提供ES6语法。所有摘录均包含最后的分号。
StandardJS风格的JavaScript（ES6）代码段：作者：James Vickery。对于那些喜欢StandardJS样式约定的人来说，这基本上是上述扩展的一个分支-也就是说，代码片段没有分号。
Atom JavaScript Snippet：作者：Saran Tanpituckpong。从Atom移植过来的JavaScript代码片段。到目前为止，安装了约26k +。
JavaScript Snippets：ES6代码片段，并且包含Mocha、Jasmine和其它BDD测试框架的代码片段。

4. 语法插件

VS Code自带的针对JavaScript的语法高亮已经相当不错。你可以安装不同的主题来改变代码的颜色。不过，如果你想要更好的可读性，可以安装代码高亮插件。这里有一些推荐：

JavaScript Atom Grammar：该插件将Visual Studio Code自带的JavaScript语法替换成了Atom编辑器的版本。
Babel JavaScript：支持 ES201x JavaScript、React、FlowType和GraphQL代码的语法高亮。
DotENV：如果你使用Node，你需要它。DotEnv提供.env文件的语法高亮。

5. 设置（settings.json）

vs code 自动保存格式化

Microsoft 版本，在settings.json里添加：

"editor.codeActionsOnSave": {"source.fixAll.tslint": true
},

react项目常用配置:

{"editor.formatOnPaste": false,"editor.formatOnType": true,"editor.formatOnSave": true,"files.autoSave": "onFocusChange","tslint.autoFixOnSave": true,"tslint.ignoreDefinitionFiles": true,"tslint.exclude": "**/node_modules/**/*,**/.history/**","css.validate": false,"less.validate": false,"scss.validate": false,"typescript.tsdk": "node_modules\\typescript\\lib","files.exclude": {"**/*.less.d.ts": true}
}

vscode 写 js 代码时报 ts 语法错误

vscode中对 js 文件莫名其妙的提示不符合 ts 的规范。

解决办法：在settings.json里，添加以下代码，禁用默认的 js 验证
```
"javascript.validate.enable": false,
```
如下图所示：

VS Code 常规配置和一些插件 - JavaScript相关推荐

Linux环境中Visual Studio Code 安装配置及其卸载（详细教程）
两篇相关博文: 在VMware15中创建虚拟机安装ubuntu系统(超详细教程) Linux环境编译运行C/C++语言程序----配置gcc.g++(详细教程) 此篇分享我在linux环境下安装VS ...
提高开发效率之VS Code基础配置篇
背景之前一直是只用WebStorm作为IDE来编写代码,但是由于: 手中的这台Mac接了两个显示器以后,使用WebStorm会有卡顿. WebStorm需要付费(虽然可以通过某方法和谐). 所以需要 ...
【猿说VUE】Visual Studio Code安装配置
Visual Studio Code安装配置现在使用Visual Studio Code编码的人越来越多,凭借着免费,开源,轻量,跨平台的特点得到了大量开发人员的喜爱.该编辑器也集成了所有一款现代编 ...
js 格式化prettier配置_prettier 格式化插件
prettier 格式化插件 prettier代码风格统一的号插件, 可以在多个编辑器上面安装对应的插件,通过简单的配置,让编辑器自动帮我们修改代码格式.可以支持JS/JSX/TS/Flow/JSON ...
Linux环境中Visual Studio Code的配置使用----编译运行C/C++（良心教程）
之前的博文分享了下载安装[VS code]的详细教程, 有需要速戳–>Linux环境中Visual Studio Code 安装配置及其卸载(详细教程) 本篇博文分享本人初次使用[VS code ...
我为 VS Code 开发了一个 Deno 插件
这几天为 Deno 开发了一个 VS Code 插件:Deno support for VSCode,GitHub 地址:github.com/justjavac/v-. 自 Deno 发布以来就备受 ...
nginx的常规配置
2019独角兽企业重金招聘Python工程师标准>>> nginx的常规配置 nginx的使用非常简单,只需要配置好我们需要的各种指令,就能跑起来.如果你需要添加模块,还需要添加模 ...
sqlyog设置自动补全_Visual Studio Code 最好的功能、插件和设置
Visual Studio Code 是由 Microsoft(微软) 发布的一个免费的,开源的跨平台文本编辑器.他们基于在线编辑 Visual Studio Online (代号为 "Mo ...
在Visual Studio Code中配置GO开发环境
一.GO语言安装详情查看:GO语言下载.安装.配置二.GoLang插件介绍对于Visual Studio Code开发工具,有一款优秀的GoLang插件,它的主页为:https://github ...

VS Code 常规配置和一些插件 - JavaScript

目录

前言