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

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供邯鄲網(wǎng)站建設(shè)、邯鄲做網(wǎng)站、邯鄲網(wǎng)站設(shè)計(jì)、邯鄲網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、邯鄲企業(yè)網(wǎng)站模板建站服務(wù)，10年邯鄲做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

在日常工作中，我們會接觸形形色色的工程。如果工程使用的技術(shù)架構(gòu)不同，可能會有對應(yīng)不同的代碼規(guī)范。而每個(gè)人的編碼習(xí)慣是不一樣的也是難以短時(shí)間內(nèi)改變的，這也是我們常常在開發(fā)一個(gè)新工程的時(shí)候，會遇到各種規(guī)范報(bào)錯(cuò)的原因?！就扑]學(xué)習(xí)：《vscode教程》】

此時(shí)，如果能有一套配置，能夠讓我們在寫代碼時(shí)不用考慮該工程的規(guī)則，只要在保存時(shí)就能夠自動(dòng)按照當(dāng)前工程配置好的規(guī)則修復(fù)所有錯(cuò)誤，這無疑會大大增加我們的開發(fā)體驗(yàn)和效率。

下面我將詳細(xì)講解為了實(shí)現(xiàn)這一目標(biāo)，我們需要做什么，以及各種規(guī)范的基本配置。

EditorConfig

首先，我們需要一個(gè)基本的規(guī)范，例如縮進(jìn)，如何換行等等。它要適用于所有的團(tuán)隊(duì)，適用于所有的語言，適用于所有的編輯器。

editorconfig 能幫助我們實(shí)現(xiàn)這一點(diǎn)。它讓所有的開發(fā)者在基本編碼規(guī)范上保持一致。

我們需要做的是：

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

• 配置 .editorconfig 文件。

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

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

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

## 縮進(jìn)方式。 值可以是 tab 或者 space
indent_style = space

## 縮進(jìn)大小。當(dāng)設(shè)置為 tab 時(shí)，會取 tab_width 的值。
indent_size = 2

## 通常不需要設(shè)置。當(dāng) indent_size = tab 時(shí)，才會生效。
tab_width = 2;

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

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

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

## 設(shè)置為 true 以確保文件在保存時(shí)以換行符結(jié)束，設(shè)置為 false 以確保不以換行符結(jié)束。
inset_final_newline = true

Eslint

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

社區(qū)里有很多不同版本的規(guī)范，每個(gè)團(tuán)隊(duì)也可能會制定自己的規(guī)范。編碼風(fēng)格千千萬，而工程的配置就一套，在多人協(xié)作時(shí)就必然會出現(xiàn)規(guī)范報(bào)錯(cuò)的情況。我們需要配置一套規(guī)則，讓我們不需要 Care 規(guī)則到底是什么，在保存文件的時(shí)候，自動(dòng)按照工程規(guī)范格式化代碼。

怎么辦呢？

Eslint 提供了風(fēng)格指南規(guī)則，并明確表示了哪些是可修復(fù)的：Stylistic Issues

我們需要做的是：

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

• VSCode 安裝 Eslint插件。

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

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

其中，想要實(shí)現(xiàn)自動(dòng)按照工程的規(guī)則格式化，第四步必不可少。

setting.json

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

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

首先，我們想要 保存時(shí)自動(dòng)格式化，實(shí)現(xiàn)這個(gè)效果的配置有三種：

• editor.formatOnSave  + eslint.format.enable。前者配置：保存時(shí)格式化，后者配置：將 ESlint 規(guī)則作為格式化標(biāo)準(zhǔn)。

• eslint.autoFixOnSave

• editor.codeActionsOnSave

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

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

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

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

// 編輯的時(shí)候檢測還是保存的時(shí)候檢測，默認(rèn)在編輯的時(shí)候就檢測。 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的右下角狀態(tài)欄顯示 ESLint 字樣，查看 ESLint 運(yùn)行狀態(tài),確保 ESLint 在正常運(yùn)行
"eslint.alwaysShowStatus": true,

.eslintrc.js

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

我們自己往往不需要去配置這個(gè)文件，因?yàn)楣こ桃话愣紩渲煤昧艘惶滓?guī)則。我們只需要使用這套規(guī)則去格式化代碼就好了。

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

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

普遍用法

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

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

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

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

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

{
  parser: 'babel-eslint',
}

• 當(dāng)訪問當(dāng)前源文件內(nèi)未定義的變量時(shí)，no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會發(fā)出警告了。

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

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

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

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

• "off" 或 0 - 關(guān)閉規(guī)則

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

• "error" 或 2 - 開啟規(guī)則，使用錯(cuò)誤級別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會退出)

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

• 配置定義在插件中的一個(gè)規(guī)則的時(shí)候，你必須使用 插件名/規(guī)則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 的配置規(guī)則實(shí)在太多，如果我們自己一條條規(guī)則去配置，這個(gè)工作了將會非常大。我們可以直接拿現(xiàn)有的規(guī)范來使用。

{
  extends: 'zoo/react',
}

Vue 特殊配置

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

高亮語法支持

安裝 Vetur插件。

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

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

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

無需將 vue 添加進(jìn) eslint.validate,因?yàn)?eslint.probe 默認(rèn)會檢測 vue 類型文件。

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

module.exports = {
    root: true,
    // 如果是SSR項(xiàng)目，則需要配置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的腳手架項(xiàng)目，則需要安裝對應(yīng)的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',

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

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

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

React 特殊配置

React 項(xiàng)目中，因?yàn)槭?.js 文件，一般不需要特殊的配置。但即使如此，針對 JSX 和 Hooks 的使用規(guī)則，我們?nèi)匀恍枰鲆恍┦虑?/p>

針對 React Hooks

lint 規(guī)則具體強(qiáng)制了哪些內(nèi)容？

eslint-plugin-hooks 是 React 源碼目錄 packages 里提供的一個(gè)包。它會強(qiáng)制執(zhí)行 Hooks 規(guī)則，它也是 Hooks API 的一部分。

npm i eslint-plugin-reack-hooks

在 .eslintrc.js 中

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

針對 JSX

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

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

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

如果不想使用內(nèi)置的規(guī)則，我們也可以自定義規(guī)則

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

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

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

StyleLint

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

我們需要做的是：

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

• 安裝 Stylelint插件。

• 配置 .stylelintrc  文件。

• 配置 VSCode 的 setting.json 文件。

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

// 防止編輯器內(nèi)置的 [css] [less] [scss] 校驗(yàn)和此擴(kuò)展 [stylelint] 報(bào)告相同的錯(cuò)誤
"css.validate": false,
"less.validate": false,
"scss.validate": false,

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

以上，我們的目標(biāo)已經(jīng)達(dá)成啦！

Prettier

代碼格式化工具。很多同學(xué)都接觸過這個(gè)工具，我個(gè)人深入了解了一下這個(gè)工具，以下是我的個(gè)人見解。先看下 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?

可以看到，這個(gè)工具旨在讓不同公司不同團(tuán)隊(duì)不需要考慮代碼規(guī)范，實(shí)現(xiàn)自動(dòng)化保存格式化。犧牲掉個(gè)性化內(nèi)容。

但是往往不同的團(tuán)隊(duì)對規(guī)則的使用是不一致的，如果強(qiáng)制所有文件都使用 prettier 自動(dòng)格式化，會出現(xiàn)與公司配置的代碼規(guī)范檢查工具（例如 ESLint） 沖突的情況。實(shí)際表現(xiàn)為自動(dòng)保存之后，依然出現(xiàn) ESLint 格式報(bào)錯(cuò)。

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

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

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

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

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VSCode如何進(jìn)行規(guī)范配置”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站名稱：VSCode如何進(jìn)行規(guī)范配置
當(dāng)前網(wǎng)址：http://chinadenli.net/article36/ihgjpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、App設(shè)計(jì)、全網(wǎng)營銷推廣、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)