VSCode如何進行規范配置

這篇文章主要介紹了VSCode如何進行規范配置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用這些配置規范并格式化你的代碼

在日常工作中，我們會接觸形形色色的工程。如果工程使用的技術架構不同，可能會有對應不同的代碼規范。而每個人的編碼習慣是不一樣的也是難以短時間內改變的，這也是我們常常在開發一個新工程的時候，會遇到各種規范報錯的原因。【推薦學習：《vscode教程》】

此時，如果能有一套配置，能夠讓我們在寫代碼時不用考慮該工程的規則，只要在保存時就能夠自動按照當前工程配置好的規則修復所有錯誤，這無疑會大大增加我們的開發體驗和效率。

下面我將詳細講解為了實現這一目標，我們需要做什么，以及各種規范的基本配置。

EditorConfig

首先，我們需要一個基本的規范，例如縮進，如何換行等等。它要適用于所有的團隊，適用于所有的語言，適用于所有的編輯器。

editorconfig 能幫助我們實現這一點。它讓所有的開發者在基本編碼規范上保持一致。

我們需要做的是：

• 安裝 EditorConfig 插件（有些編輯器默認支持 EditorConfig ，具體請看 這些編輯器不需要安裝插件）。

• 配置 .editorconfig 文件。

以下是 .editorconfig 的用法和例子：

## 打開文件時，EditorConfig 插件會在打開的文件的目錄和每個父目錄中查找名為 .editorconfig 的文件。 
## 如果到達根文件路徑或找到具有 root=true 的 EditorConfig 文件，將停止對 .editorconfig 文件的搜索。
## 如果 root=true 沒有配置, EditorConfig 插件將會在工程之外尋找 .editorconfig 文件
root = true

## 使用規則匹配文件
## *            匹配任何字符串，路徑分隔符 (/) 除外
## **           匹配任意字符串
## ?            匹配任何單個字符
## [name]       匹配給定的字符串中的任何單個字符
## [!name]      匹配不在給定字符串中的任何單個字符
## {s1,s2,s3}   匹配任意給定的字符串
## {num1..num2} 匹配num1和num2之間的任何整數，其中num1和num2可以是正數或負數
## 如規則[*.{js}]只對 .js 文件生效。一般來說，我們配置 [*] 對所有文件生效。
[*]

## 縮進方式。 值可以是 tab 或者 space
indent_style = space

## 縮進大小。當設置為 tab 時，會取 tab_width 的值。
indent_size = 2

## 通常不需要設置。當 indent_size = tab 時，才會生效。
tab_width = 2;

## 設置為 lf、cr 或 crlf 以控制如何表示換行符。
end_of_line = lf

## 設置為 latin1、utf-8、utf-8-bom、utf-16be 或 utf-16le 來控制字符集。
charset = utf-8

## 設置為 true 以刪除換行符之前的任何空格字符，設置為 false 以確保不會。
trim_trailing_whitespace = true

## 設置為 true 以確保文件在保存時以換行符結束，設置為 false 以確保不以換行符結束。
inset_final_newline = true

Eslint

對于前端開發工程師來說，JavaScript 無疑是我們最好的伙伴了。而 ESLint，它是一款插件化的 JavaScript 代碼靜態檢查工具，其核心是通過對代碼解析得到的 AST（Abstract Syntax Tree，抽象語法樹）進行模式匹配，定位不符合約定規范的代碼。

社區里有很多不同版本的規范，每個團隊也可能會制定自己的規范。編碼風格千千萬，而工程的配置就一套，在多人協作時就必然會出現規范報錯的情況。我們需要配置一套規則，讓我們不需要 Care 規則到底是什么，在保存文件的時候，自動按照工程規范格式化代碼。

怎么辦呢？

Eslint 提供了風格指南規則，并明確表示了哪些是可修復的：Stylistic Issues

我們需要做的是：

• 本地安裝 Eslint 和社區推薦的規范 eslint-config-airbnb （也可以是別的規范）。插件會使用安裝的 Eslint 庫（如果你還未安裝：npm i eslint eslint-config-airbnb）。

• VSCode 安裝 Eslint插件。

• 添加 .eslintrc.js 配置文件。

• 更改 VSCode 的 setting.json 文件的配置。

其中，想要實現自動按照工程的規則格式化，第四步必不可少。

setting.json

如果你已經安裝好了 Eslint插件，按 cmd + shif + p，打開 defaultSettings.json 文件，按 cmd + f 搜索 eslint 可以看到所有 ESlint 在 VSCode 內的默認配置。我們需要對它做一些修改。

還是按 cmd + shift + p 打開 settings.json 文件。這個文件是用戶自定義配置，里面的配置會覆蓋 defaultSettings.json 里的同名配置。我們在這個文件里對 ESLint插件 的配置做一些修改，讓它達到我們想要的效果。

首先，我們想要 保存時自動格式化，實現這個效果的配置有三種：

• editor.formatOnSave  + eslint.format.enable。前者配置：保存時格式化，后者配置：將 ESlint 規則作為格式化標準。

• eslint.autoFixOnSave

• editor.codeActionsOnSave

其中，第二種 eslint.autoFixOnSave 已經被廢棄。使用它會提示更改為 editor.codeActionsOnSave。

而第一種和第三種都可以實現，但是更推薦使用第三種 editor.codeActionsOnSave，它支持更高的可配置性。

使用  editor.codeActionsOnSave 的時候，我們需要禁用其它格式化程序，最好的做法是將 ESlint 設置為格式化程序默認值。并且當我們這么做的時候，我們可以關閉 editor.formatOnSave，否則我們的文件將被修復兩次，這是沒有必要的。

以下便是我們需要在 setting.json 里新增的配置。（注釋的地方是默認配置，無需新增）

// 編輯的時候檢測還是保存的時候檢測，默認在編輯的時候就檢測。 default: onType
// "eslint.run": "onType",

// default: false
// "eslint.format.enable": false,

// default: false
// "editor.formatOnSave": false,

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

// 始終在VSCode的右下角狀態欄顯示 ESLint 字樣，查看 ESLint 運行狀態,確保 ESLint 在正常運行
"eslint.alwaysShowStatus": true,

.eslintrc.js

接下來，我們聊聊 .eslintrc.js 文件。這個文件將會規定我們的 ESLint 具體該使用什么規則去規范我們的代碼。

我們自己往往不需要去配置這個文件，因為工程一般都會配置好了一套規則。我們只需要使用這套規則去格式化代碼就好了。

但是看懂每條規則的意義，對于我們也是很重要的，例如你想自己新建工程。

接下來，我將從 普遍用法、Vue項目特殊配置、React項目特殊配置 來看下如何配置 .eslintrc.js 文件。

普遍用法

• 默認情況下，ESLint 支持 ES5 的語法。我們可以覆蓋這個配置，啟用對 ES6、 ES7 ...  的支持。

// 啟用對 es6 的語法和全局變量的支持
{
  env: {
    es6: true,
  },
}

• 如果我們想讓 ESLint 不僅能識別瀏覽器環境中的語法，其它環境(如 Node)我們也希望它能識別，這時候我們可以這樣配置：

{
  env: {
    browser: true,
    node: true,
  },
}

• 在一些項目中，我們需要特殊的解析器去解析我們的代碼，是否是符合規范的。這時候我們可以使用 Parser

{
  parser: 'babel-eslint',
}

• 當訪問當前源文件內未定義的變量時，no-undef 規則將發出警告。如果你想在一個源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發出警告了。

{
  globals: {
    "__DEV__": true,
    "If": true,
    "For": true,
    "POBrowser": true
  },
}

• ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。在配置文件里配置插件時，可以使用 plugins 關鍵字來存放插件名字的列表。插件名稱可以省略 eslint-plugin- 前綴。

{
  	plugins: ['react-hooks', 'jsx-control-statements'],
}

• ESLint 附帶有大量的規則。你可以使用注釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置為下列值之一：

• "off" 或 0 - 關閉規則

• "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)

• "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

{
    rules: {
        eqeqeq: 'off',
        curly: 'error',
        quotes: ['error', 'double']
    }
}

• 配置定義在插件中的一個規則的時候，你必須使用 插件名/規則ID 的形式。比如：

{
  plugins: ['react-hooks', 'jsx-control-statements'],
  rules: {
    'arrow-parens': 0,
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'jsx-control-statements/jsx-use-if-tag': 0,
    'react/jsx-no-undef': ['error', { 'allowGlobals': true }],
    'no-prototype-builtins': 'off',
  }
}

• ESLint 的配置規則實在太多，如果我們自己一條條規則去配置，這個工作了將會非常大。我們可以直接拿現有的規范來使用。

{
  extends: 'zoo/react',
}

Vue 特殊配置

由于 Vue 單文件組件的特殊寫法，針對 Vue 項目，需要做一些特殊的 ESLint 配置，以達到自動化的效果。

高亮語法支持

安裝 Vetur插件。

使用 ESLint 而不是 Vetur 做代碼檢測

Vetur 為 Vue 項目帶來了語法高亮和便捷的操作。但是它本身也會自動開啟對 Vue 文件的代碼檢測。這往往會和我們配置的 ESLint 有沖突。為了避免這一點，需要在 VSCode 的 settings.json 中做一些配置：

// 不允許它格式化代碼
"vetur.format.enable": false,
// 不允許它做代碼檢測
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,

無需將 vue 添加進 eslint.validate,因為 eslint.probe 默認會檢測 vue 類型文件。

然后，我們需要配置 .eslintrc.js 文件，里面用到的插件都需要本地安裝。

module.exports = {
    root: true,
    // 如果是SSR項目，則需要配置node:true
    env: {
        browser: true,
        node: true,
    },
    // 為什么是這樣的parser配置？https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: [
        // 如果是nuxt.js的腳手架項目，則需要安裝對應的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',

        // 讓eslint可以規范vue文件
        'plugin:vue/base',
        // vue3的項目需要使用，如果是vue2項目，使用 plugin:vue/recommended
        'plugin:vue/vue3-recommended',
    ],
    plugins: [
        // 注意這里不能配置 html 選項，為什么？https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue',
    ],
    // 配置自己的規則，覆蓋上面繼承的規則
    rules: {
        // 配置js的縮進為 2，switch case 語句的 case 也使用2個空格縮進
        indent: ['error', 2, { SwitchCase: 1 }],
        // 使用 eslint 檢測 template里的代碼，這里我配置 2 個空格縮進
        'vue/html-indent': ['error', 2],
    },
};

以上配置，大家根據自己的項目特點，自行刪減即可。比如，如果你的項目不是 nuxt.js 的，可以去掉 extends 里的 '@nuxtjs 和 plugin:nuxt/recommended。

如果是 Vue cli 創建的項目，并且沒有使用 ts，需要在項目根目錄添加 jsconfig.json 文件。有關 jsconfig 的配置在這里：jsconfig

React 特殊配置

React 項目中，因為是 .js 文件，一般不需要特殊的配置。但即使如此，針對 JSX 和 Hooks 的使用規則，我們仍然需要做一些事情

針對 React Hooks

lint 規則具體強制了哪些內容？

eslint-plugin-hooks 是 React 源碼目錄 packages 里提供的一個包。它會強制執行 Hooks 規則，它也是 Hooks API 的一部分。

npm i eslint-plugin-reack-hooks

在 .eslintrc.js 中

module.exports = {
  // eslint-plugin 可以簡寫
  plugins: ['react-hooks'],
}

針對 JSX

JSX 不過只是 React 的一個語法糖，其最終都會被 React 調用 React.createElement 編譯城 React Element 形式。所以在 17 版本之前，如果我們使用到了 JSX 但是沒有引入 React ，會提示 'React' must be in scope when using JSX。 而在 17 版本之后， React 與 babel 和 TypeScript 編譯器合作，將轉化任務交給了編譯器自動轉化。

如果我們是之前的轉化版本，我們要獲得對 JSX 的語法支持，我們需要安裝 eslint-plugin-react,它內置了對 JSX 的代碼規范檢測。

{
  extends: ['plugin:react/recommended'],
}

如果不想使用內置的規則，我們也可以自定義規則

{
  plugins: ['react'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'react/jsx-no-undef': ['error', { "allowGlobals": true }],
  },
}

如果是新的轉化版本，則需要做一點小小的更改,以便在使用 JSX 的時候，不會要求我們引入 React。

{
  extends: ['plugin:react/recommended', 'plugin:react/jsx-runtime'],
}

StyleLint

在完成了以上的配置之后，我們已經可以對 .js 文件、.vue 文件的 template 和 script 模塊實現代碼規范和保存時自動格式化了。但是對于 .css、.less、.scss 文件和 .vue 文件的 style 模塊，我們還需要做額外的配置，否則樣式部分不規范，我們也是沒法檢測并自動修復的。

我們需要做的是：

• npm i stylelint stylelint-config-standard stylelint-scss。

• 安裝 Stylelint插件。

• 配置 .stylelintrc  文件。

• 配置 VSCode 的 setting.json 文件。

其中，第四步也是必須的，我們需要做如下配置：

// 防止編輯器內置的 [css] [less] [scss] 校驗和此擴展 [stylelint] 報告相同的錯誤
"css.validate": false,
"less.validate": false,
"scss.validate": false,

// 保存時使用 eslint 和 stylelint 進行修復
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},
// 默認會對很多文件進行檢測，這是不必要的，我們只讓他檢測樣式
"stylelint.validate": [
		"css",
		"html",
		"less",
		"postcss",
		"sass",
		"scss",
		"source.css.styled",
		"styled-css",
	],

以上，我們的目標已經達成啦！

Prettier

代碼格式化工具。很多同學都接觸過這個工具，我個人深入了解了一下這個工具，以下是我的個人見解。先看下 Prettier 官方的一段話吧。

So why choose the “Prettier style guide” over any other random style guide? Because Prettier is the only “style guide” that is fully automatic. Even if Prettier does not format all code 100% the way you’d like, it’s worth the “sacrifice” given the unique benefits of Prettier, don’t you think?

可以看到，這個工具旨在讓不同公司不同團隊不需要考慮代碼規范，實現自動化保存格式化。犧牲掉個性化內容。

但是往往不同的團隊對規則的使用是不一致的，如果強制所有文件都使用 prettier 自動格式化，會出現與公司配置的代碼規范檢查工具（例如 ESLint） 沖突的情況。實際表現為自動保存之后，依然出現 ESLint 格式報錯。

想讓 prettier 生效，需要我們在 VSCode 里配置：

// 所有文件都使用 prettier 格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 只對 js 文件使用 prettier
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

// 所有文件都不指定自動格式化方式
"editor.defaultFormatter": null,

// js文件不指定自動格式化方式
"[javascript]": {
    "editor.defaultFormatter": null
 }

可以使用 .prettierrc 文件、VSCode 的 setting.json 、.editorConfig 來配置 prettier。

推薦不常使用的文件類型，使用 prettier 去格式化。js,json,jsx,html,css,less,vue 等這些文件，使用工程統一的規范去格式化。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“VSCode如何進行規范配置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!