如何使用eslint和editorconfig規(guī)范代碼

這篇文章主要為大家展示了“如何使用eslint和editorconfig規(guī)范代碼”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用eslint和editorconfig規(guī)范代碼”這篇文章吧。

使用eslint和editorconfig規(guī)范代碼

為什么要用這些：

1. 代碼規(guī)范有利于團(tuán)隊(duì)協(xié)作

2. 純手工規(guī)范耗時(shí)耗力而且不能保證準(zhǔn)確性

3. 能配合編輯器自動(dòng)提醒錯(cuò)誤，提高開(kāi)發(fā)效率

eslint

隨著ECMAScript版本一直更新的Js lint工具，插件豐富，并且能夠套用規(guī)范，規(guī)則非常豐富，能夠滿足大部分團(tuán)隊(duì)的需求。

eslint 配合 git

為了最大程度控制每個(gè)人的規(guī)范，我們可以在git commit代碼的時(shí)候，使用git hook調(diào)用eslint進(jìn)行代碼規(guī)范驗(yàn)證，不規(guī)范的代碼無(wú)法提交到倉(cāng)庫(kù)。

editorconfig

不同編輯器對(duì)文本的格式會(huì)有一定的區(qū)別，如果不統(tǒng)一一些規(guī)范，可能你和別人合作的時(shí)候每次更新下來(lái)別人的代碼就會(huì)出一大堆錯(cuò)誤-webstorm自動(dòng)支持editorconfig配置文件。

首先安裝eslintnpm i eslint 因?yàn)閏reate-react-app默認(rèn)已經(jīng)安裝了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我們針對(duì)我們想要的自定義配置，我們?cè)侔惭b如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

我們?cè)诟夸浵滦陆?.eslintrc 文件針對(duì)整個(gè)項(xiàng)目做一個(gè)標(biāo)準(zhǔn)的規(guī)范

{
 "extends": "standard"
}

主要項(xiàng)目是前端工程，所以我們?cè)谇岸宋募A下新建 .eslintrc 文件，在這里去規(guī)范客戶端代碼，客戶端代碼使用 jsx，很多規(guī)則和 nodejs 是不同的，在這里使用更加嚴(yán)格的規(guī)范來(lái)要求客戶端代碼。

配置的value對(duì)應(yīng)的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用 babel-eslint 去解析代碼，定義環(huán)境是瀏覽器和es6，會(huì)包含公共變量，webpack所以需要node一些環(huán)境變量，parserOptions定義版本，jsmodule模式方法書(shū)寫(xiě)。

因?yàn)樾枰诿看尉幾g之前都要去檢查一下代碼，所以還需要配置 webpack,這是create-react-app默認(rèn)的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我們希望屏蔽掉 node_modules 文件夾下的代碼

exclude:[path.resolve(__dirname, '../node_modules')]

在項(xiàng)目根目錄下新建文件 .editorconfig webstom默認(rèn)就有配置

1. root = true 項(xiàng)目根目錄

2. [*] 所有文件都應(yīng)用這個(gè)規(guī)則

3. charset = utf-8 編碼模式

4. indent_style = space 使用 tab 的樣式制表符和 space

5. indent_size = 2

6. end_of_line = lf 行尾結(jié)尾方式

7. insert_final_newline = true 自動(dòng)保存行尾最后一行是空行

8. trim_trailing_whitespace = true 一行結(jié)束后面的空格自動(dòng)去掉

eslint 不檢測(cè)這行代碼 // eslint-disable-line

eslint 不檢測(cè)這個(gè)文件，在開(kāi)頭 /* eslint-disable */在文件結(jié)尾/* eslint-enable */

安裝 npm i husky -D

然后在 package.json scripts中增加git 鉤子,會(huì)在執(zhí)行g(shù)it commit之前會(huì)調(diào)用這個(gè)命令

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit 強(qiáng)制執(zhí)行 eslint 通過(guò)的代碼

以上是“如何使用eslint和editorconfig規(guī)范代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！