VSCode如何進行規(guī)范配置

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

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

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

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

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

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

EditorConfig

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

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

我們需要做的是：

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

  • 配置 .editorconfig 文件。

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

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

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

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

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

## 通常不需要設(shè)置。當(dāng) indent_size = tab 時，才會生效。
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 以確保文件在保存時以換行符結(jié)束，設(shè)置為 false 以確保不以換行符結(jié)束。
inset_final_newline = true

Eslint

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

社區(qū)里有很多不同版本的規(guī)范，每個團隊也可能會制定自己的規(guī)范。編碼風(fēng)格千千萬，而工程的配置就一套，在多人協(xié)作時就必然會出現(xiàn)規(guī)范報錯的情況。我們需要配置一套規(guī)則，讓我們不需要 Care 規(guī)則到底是什么，在保存文件的時候，自動按照工程規(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 文件的配置。

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

setting.json

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

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

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

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

  • eslint.autoFixOnSave

  • editor.codeActionsOnSave

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

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

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

以下便是我們需要在 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的右下角狀態(tài)欄顯示 ESLint 字樣，查看 ESLint 運行狀態(tài),確保 ESLint 在正常運行
"eslint.alwaysShowStatus": true,

.eslintrc.js

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

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

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

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

普遍用法

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

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

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

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

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

{
  parser: 'babel-eslint',
}

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

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

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

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

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

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

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

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

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

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

{
  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的腳手架項目，則需要安裝對應(yīng)的插件并做以下配置
        '@nuxtjs',
        'plugin:nuxt/recommended',

        // 讓eslint可以規(guī)范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',
    ],
    // 配置自己的規(guī)則，覆蓋上面繼承的規(guī)則
    rules: {
        // 配置js的縮進為 2，switch case 語句的 case 也使用2個空格縮進
        indent: ['error', 2, { SwitchCase: 1 }],
        // 使用 eslint 檢測 template里的代碼，這里我配置 2 個空格縮進
        'vue/html-indent': ['error', 2],
    },
};

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

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

React 特殊配置

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

針對 React Hooks

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

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

npm i eslint-plugin-reack-hooks

在 .eslintrc.js 中

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

針對 JSX

JSX 不過只是 React 的一個語法糖，其最終都會被 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ù)交給了編譯器自動轉(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)化版本，則需要做一點小小的更改,以便在使用 JSX 的時候，不會要求我們引入 React。

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

StyleLint

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

我們需要做的是：

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

  • 安裝 Stylelint插件。

  • 配置 .stylelintrc  文件。

  • 配置 VSCode 的 setting.json 文件。

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

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

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

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

Prettier

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

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

但是往往不同的團隊對規(guī)則的使用是不一致的，如果強制所有文件都使用 prettier 自動格式化，會出現(xiàn)與公司配置的代碼規(guī)范檢查工具（例如 ESLint） 沖突的情況。實際表現(xiàn)為自動保存之后，依然出現(xiàn) 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 等這些文件，使用工程統(tǒng)一的規(guī)范去格式化。

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

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

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

廣告

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

商城網(wǎng)站建設(shè)