目錄

• 前言
• 1. 插件包
• 2. Node插件
• 3. 代碼片段(Snippet)插件
• 4. 語法插件
• 5. 設(shè)置（settings.json）

---

前言

首次安裝VS Code時，它附帶了一些JavaScript和Typescript內(nèi)置片段。片段可幫助您快速編寫重復(fù)代碼。但是，您可能會發(fā)現(xiàn)這些可能還不夠。您可以輕松創(chuàng)建自己的擴(kuò)展程序，也可以簡單地安裝包含一堆新的有用代碼片段的擴(kuò)展程序。如果要在建議的頂部顯示摘要，一個快速提示是使用以下配置：

{"editor.snippetSuggestions": "top" }

---

1. 插件包

VS Code的插件市場有一個類型叫插件包。它實際上已一個相互關(guān)聯(lián)的插件的集合，方便一起安裝，協(xié)同使用。

• Nodejs Extension Pack：包含了ESLint、npm、JavaScript(ES6)代碼片段、node_modules搜索、NPM智能提示和文件路徑智能提示。

• VS Code for Node.js – Development Pack ：NPM智能提示，ESLint，Chrome調(diào)試器，Code Metrics，Docker和導(dǎo)入包的開銷計算。

• Vue.js Extension Pack：包含大約12個VS Code插件，比如auto-rename-tag 和 auto-close-tag。

• Ionic Extesion Pack：包含許多用于Ionic、Angular、RxJS、Cordova和HTML開發(fā)的插件。
  
  

2. Node插件

每一個JavaScript項目至少需要安裝一個Node包。這里推薦一些針對Node的插件：

• npm：使用package.json來驗證已經(jīng)安裝的模塊，確保已經(jīng)安裝的模塊版本號正確，標(biāo)記那些安裝了但是沒有在package.json列出來的包，以及那些還沒有安裝的包。

• Node.js Modules IntelliSense：為JavaScript和TypeScript模塊自動補(bǔ)全import語句。

• Visual Studio IntelliCode：該插件基于 AI 自動學(xué)習(xí)并智能提示，甚至于編輯器會學(xué)習(xí)使用者的習(xí)慣，將最常用的提示放在最前面。

3. 代碼片段(Snippet)插件

當(dāng)你第一次安裝VS Code，它會提供基本的針對JavaScript/TypeScript的代碼片段支持。以下是一些針對JavaScript開發(fā)人員的最受歡迎的代碼段擴(kuò)展。但是，為簡單起見，我建議您僅安裝一個。

• JavaScript（ES6）代碼段：作者：Charalampos Karypidis。這是目前最受歡迎的javaScript代碼段擴(kuò)展，迄今為止安裝次數(shù)超過3百萬。該擴(kuò)展為JavaScript，TypeScript，HTML，React和Vue提供ES6語法。所有摘錄均包含最后的分號。

• StandardJS風(fēng)格的JavaScript（ES6）代碼段：作者：James Vickery。對于那些喜歡StandardJS樣式約定的人來說，這基本上是上述擴(kuò)展的一個分支-也就是說，代碼片段沒有分號。

• Atom JavaScript Snippet：作者：Saran Tanpituckpong。從Atom移植過來的JavaScript代碼片段。到目前為止，安裝了約26k +。

• JavaScript Snippets：ES6代碼片段，并且包含Mocha、Jasmine和其它BDD測試框架的代碼片段。

4. 語法插件

VS Code自帶的針對JavaScript的語法高亮已經(jīng)相當(dāng)不錯。你可以安裝不同的主題來改變代碼的顏色。不過，如果你想要更好的可讀性，可以安裝代碼高亮插件。這里有一些推薦：

• JavaScript Atom Grammar：該插件將Visual Studio Code自帶的JavaScript語法替換成了Atom編輯器的版本。

• Babel JavaScript：支持 ES201x JavaScript、React、FlowType和GraphQL代碼的語法高亮。

• DotENV：如果你使用Node，你需要它。DotEnv提供.env文件的語法高亮。

5. 設(shè)置（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 的規(guī)范。

  解決辦法：在settings.json里，添加以下代碼，禁用默認(rèn)的 js 驗證

  "javascript.validate.enable": false,

  如下圖所示：

總結(jié)

以上是生活随笔為你收集整理的VS Code 常规配置和一些插件 - JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。