前端工程化之eslint代碼檢查

時間  2021-08-14
標籤 javascript html 前端 vue java node react git 程序員 typescript 欄目 JavaScript 简体版
原文   原文鏈接

前言

爲何要進行代碼質量檢查呢，緣由有三：javascript

  1. 一些常見代碼問題，若是在編譯或運行時不能及時發現，代碼中的語法問題會直接致使編譯或運行時錯誤，影響開發效率和代碼質量；
  2. 統一代碼習慣，每個團隊或我的都會有一些代碼規範或者代碼習慣，爲了便於後期維護和閱讀，咱們編寫的代碼也須要符合必定的格式規範：
    • 空格；
    • 統一縮進；
    • 命名規範；
  3. 保證線上代碼質量。在版本管理中，咱們須要在提交或發佈以前自動執行一些代碼檢查工做，確保咱們的代碼符合最終版本要求。

前端代碼中的常見問題

書寫風格

簡單來講，太過隨意的代碼會讓開發者難以閱讀，而難以閱讀的代碼有時甚至不如推倒重來。html

// bad
var once
    , upop
    , aTime;

// good
var once,
   upon,
   aTime;
   
// bad
var hero = {
   firstName: 'Bob'
   , lastName: 'parr'
   , heroName: 'Mr.Incredible'
   , superPower: 'strength'
};

// good
var hero = {
   firstName: 'Bob',
   lastName: 'parr',
   heroName: 'Mr.Incredible',
   superPower: 'strength'
};
複製代碼

代碼規範

不遵照編碼標準和慣例的代碼會讓你看一眼就不想繼續看、甚至看半天而不知所云。有人認爲初級程序員纔會有這種問題，其實否則，一些工做經驗兩三年的同窗寫的代碼依然如此。對於一些我的自學意識不夠積極、沒有團隊規範性指引的程序員，很容易出現代碼格式不規範的問題。前端

Lint 會經過源代碼去查找：vue

  • 格式問題；
  • 不遵照編碼標準和慣例；
  • 精肯定位程序中的可能存在的邏輯錯誤。

代碼 Lint 是動態的監測代碼邊寫的錯誤，以便咱們能寫出高質量的代碼。
要與 Prettier 或者 Format 要區別開來，Lint 只會告訴你代碼中的錯誤或者不規範的地方，而 Format 是用來對格式進行調整的。java

ESlint 介紹

ESlint 是 JavaScript 的 linting 實用程序。node

ESlint 不依賴與特定的編碼約定，用戶也能夠自由地啓用或禁用各個編碼約定。從這個意義上講，它的一個主要特色是其高度可定製性。react

用戶能夠經過定義原始規則來靈活的設置編碼標準，這些規則是 Elint 中默承認用的編碼規則。git

核心概念

  • 配置文件：
    .eslintrc，.eslintrc.js，.eslintrc.yml程序員

  • Rules：typescript

    • "off"或0：關閉規則；
    • "wran"或1：開啓規則，使用警告級別的錯誤：warn（不會致使程序退出）；
    • "error"或2：開啓規則，使用錯誤級別的錯誤：error（當貝觸發的時候，程序會退出）。

    看一個例子：

    {
    "rules":{
        "semi":["error","never"],
        "quotes":["error","single"]
    }
}
複製代碼

    看一個例子：

    {
    "rules":{
        "semi":["2","never"],
        "quotes":["2","single"]
    }
}
複製代碼

  • Extends：
    使用別人提供的包，如 Google：

    {
    "extends"："google"
}
複製代碼

  • Plugins：
    ESlint 提供的默認規則涵蓋了基本規則，但 JavaScript 能夠 使用的範圍很是普遍。所以，您可能但願規則不在默認規則中。這種狀況下，能夠在 ESlint 中開發本身的獨立規則。爲了讓第三方開發本身的規則，ESlint 容許使用插件，若是你在 npm 中搜索 eslint-plugin-*，你能夠找到第三方提供的大量自定義插件。若是 ESlint 的默認規則未提供要使用的規則，則建議您查找插件。

    與可共享配置相似，它很容易設置。例如，若是要對 React 代碼進行靜態分析，能夠安裝名爲 eslint-plugin-react 的插件，並使用如下設置來執行 React 語法特有的靜態分析。

    {
    "extends"："google",
    "plugins": ["react"],
    "rules":{
        "semi":[2,"never"],
        "quotes":[2,"single"]
    }     
}
複製代碼

起步與安裝

在項目中使用

// --dev 會把 eslint 安裝到package.json 文件中的 devDependencies 屬性中，意思是知識開發階段用到這個包，上線時就不須要這個包了
yarn add eslint --dev
複製代碼

新增 package.json 腳本：

"scripts": {
   "lint": "eslint app.js",
   "lint:create": "eslint --init"
   },
複製代碼

而後使用 run 命令：

yarn lint:create
複製代碼

在全局使用

yarn global add eslint
eslint --init
複製代碼

image.png

生成的 .eslintrc.js 文件導出一個對象，對象包含屬性 env、extends、parserOptions、plugins、rules 五個屬性：

  • env:指定腳本的運行環境。每種環境都有一組特定的預約義全局變量，（如：nodejs，browser，commonjs 等）中。
  • parserOptions：用於指定想要支持的 JavaScript 語言選項：
    • ecmaVersion：默認設置爲3，5（默認），你可使用六、七、8或9來指定你想要使用的 ECMAScript 版本。你也能夠用使用年份命名的版本號指定爲2015（同6），2016（同7），或2017（同8）或2018（同9）；
    • sourceType：設置爲 "script"（默認）或"module"（若是你的代碼是 ECMAScript）。
  • globals：執行代碼時腳本須要訪問的額外全局變量；
  • rules：開啓某些規則，也能夠設置規則的等級。

.eslintignore

能夠在項目根目錄建立，告訴 ESlint 忽略某些文件或者目錄。至關於 .gitignore 都是純文本文件。

image.png

ESlint 的使用方法

在你根據以上步驟設置 .eslintrc.js 配置文件後，你能夠在項目更目錄運行 ESlint，檢查你的 js 文件：

yarn lint index.js
複製代碼

vscode 使用 eslint 保存自動格式化

  1. 在項目跟目錄添加.eslintrc.js 文件

    // https://cn.eslint.org/docs/rules/
// 
/* * "off"或者0，不啓用這個規則 * "warn"或者1，出現問題會有警告 * "error"或者2，出現問題會報錯 */

module.exports = {
     root: true, //此項是用來告訴eslint找當前配置文件不能往父級查找
     env: { //環配置 如 "browser": true, node: true,
       node: true,
     },
     extends: [
       'google',
     ],
     rules: {
       'array-callback-return': 1, //return 後面是否容許省略
       "arrow-parens": ["error", "as-needed"], // 箭頭函數的參數能夠不使用圓括號
       'consistent-return': 0, //要求 return 語句要麼老是指定返回的值，要麼不指定
       'camelcase': 0, //強制駝峯法命名
       'eqeqeq': 0, //強制全等( === 和 !==)
       'func-names': 0, //函數表達式必須有名字
       "global-require": 0, // 取消對require的驗證，使得可使用require來加載圖片的相對路徑
       "import/no-unresolved": 0, // 取消自動解析路徑，以此開啓alias的別名路徑設置
       'import/extensions': 0, // 取消對文件擴展名的驗證
       'indent': 'off', //縮進風格(強制使用一致的縮進)
       "linebreak-style": 0, // 取消換行符\n或\r\n的驗證()
       'max-len': 0, //字符串最大長度
       "no-unused-vars": 1, //禁止出現未使用過的變量
       "no-redeclare": 1, //禁止屢次聲明同一變量
       'no-use-before-define': 1, //禁止在變量定義以前使用它們
       "no-unused-expressions": 0, // 容許使用未使用過的表達式，以此來支持a && a()的代碼形式
       'no-restricted-syntax': 1, //禁用特定的語法
       'no-plusplus': 1, //禁止使用++，--
       'no-underscore-dangle': 0, // 容許在標識符中使用下劃線
       'no-param-reassign': 0, // 禁止對 function 的參數進行從新賦值
       'no-nested-ternary': 0, // 禁止嵌套三元表達式
       'no-else-return': 0, //禁止 if 語句中 return 語句以後有 else 塊
       'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
       'no-shadow': [1, { //外部做用域中的變量不能與它所包含的做用域中的變量或參數同名
         "allow": ["resolve", "reject", "done", "cb"]
       }],
       'prefer-rest-params': 1, //要求使用剩餘參數而不是 arguments
       'prefer-arrow-callback': 0, //要求回調函數使用箭頭函數
       'prefer-const': 1, //首選const
       "semi": false, // 使用分號, 默認true
       "singleQuote": true, // 使用單引號, 默認false(在jsx中配置無效, 默認都是雙引號)
       "tabWidth": 4, // tab縮進大小,默認爲4
       'template-curly-spacing': 'off', //要求或禁止模板字符串中的嵌入表達式周圍空格的使用
     },
     parserOptions: {
       parser: 'babel-eslint',
     },
   };
複製代碼

  2. 在vscode中添加 eslint。

    image.png

  3. 配置保存時按eslint規則自動格式化。
    可在「首選項」--「設置」中找到settings.json

    image.png

    添加以下配置：

    ```JavaScript
"editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
},
"eslint.format.enable": true
```
複製代碼

    能夠看下eslint的詳細說明，有如圖的配置說明，就使用新版本的配置：

    image.png

    這樣配置完成後保存文件時就會自動格式化了。

Vue 項目中使用 ESLint 和 Prettier

雖然ESLint會對咱們的代碼格式進行一些檢測（好比分號、單雙引號等），可是並不能徹底統一代碼風格，咱們還須要一個工具Prettier。它並不關心你的語法是否正確，只關心你的代碼格式，好比是否使用單引號，語句結尾是否使用分號等等，不只能夠用來檢測 JavaScript 代碼格式，還能夠檢測 vue 文件，react 文件。

深刻 VSCode 配置

大部分的同窗開啓了插件之後，VSCode 仍然沒有高亮。由於須要對 VSCode 中的相關參數繼續配置。

"eslint.probe": [
   "javascript",
   "javascriptreact",
   "typescript",
   "typescriptreact",
   "html",
   "vue",
   "markdown"
],
複製代碼

eslint.probe 這個規定 ESlint 插件須要校驗的語言類型，添加上對應的語言後 VSCode 纔會在代碼編輯器中正確的高亮錯誤的語法，而且會在窗口中輸出錯誤信息。若是開發 vue 的同窗須要在這裏添加上 ["html", "vue"] 這樣纔會在 .vue 單文件中開啓 ESlint 檢測，這兩個選項須要 eslint-plugin-vue eslint-plugin-html兩個包支持，須要安裝到項目中。

eslint插件以eslint-plugin-開頭，使用時能夠省略；好比咱們上面檢測 .vue 文件就用到eslint-plugin-vue插件；須要注意的是，咱們在配置eslint-plugin-vue這個插件時，若是僅配置"plugins": ["vue"]，vue 文件中 template 內容仍是會解析失敗。

這是由於不論是默認的 espree 仍是 babel-eslint 解析器都沒法解析 .vue 中 template 的內容；eslint-plugin-vue插件依賴vue-eslint-parser解析器，而vue-eslint-parser解析器只會解析template內容，不會檢測 script 標籤中的 JS 內容，所以咱們還須要指定一下解析器：

{
    "extends": ["eslint:recommended"],
    "plugins": ["vue","html"],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 12,
        "sourceType": "module",
    },
}
複製代碼

上面parserOptions.parser很多同窗確定看的有點迷糊，這是因爲外層的解析器只能有一個，咱們已經用了vue-eslint-parser就不能再寫其餘的；所以vue-eslint-parser的作法是在解析器選項中再傳入一個解析器選項用來處理script中的JS內容。

開啓 prettier 格式化

開啓上面的選項後，VSCode 已經能正確的顯示 ESlint 的報錯信息，接下來要開啓 prttier 的格式化。前面有說到，prettier 是一個校驗代碼格式化的工具，而 ESlint 的是校驗語法的工具。一個項目維護兩種配置可能有些麻煩，所以 ESlint 直接以插件的形式提供了支持。

安裝

要使用Prettier固然先得安裝它，而後還須要安裝 eslint-plugin-prettier。

爲了防止Prettier和ESLint格式化功能衝突，還須要安裝 eslint-config-prettier 來關閉ESLint中的代碼格式化功能。

yarn add -D eslint
yarn add -D eslint-plugin-prettier
yarn add -D eslint-config-prettier
複製代碼

在 .prettierignore 和 .eslintignore 文件中能夠添加那些不須要格式化的文件或文件夾，在美化代碼挑bug時忽略這些文件。

配置

下面來看看在ESLint中添加Prettier插件的配置文件是什麼樣子的：

{
  plugins: ["prettier"],
  rules: {
    prettier/prettier: "error"
  }
}
複製代碼

在eslint-plugin-prettier 的GitHub上給出了一種推薦配置：

{
  extends: ["plugin:prettier/recommended"]
}
複製代碼

咱們能夠在項目中新建一個.prettierrc.json文件：

{
     // 尾逗號
     "trailingComma": "es5",
     // 縮進長度
     "tabWidth": 4,
     // 代碼末尾分號
     "semi": false,
     // 單引號
     "singleQuote": true,
     // 單行代碼最大長度
     "printWidth": 100,
     // 對象字面量的括號
     "bracketSpacing": true,
     // 箭頭函數參數加括號
     "arrowParens": "always",
}
複製代碼

這裏簡單貼一些經常使用的，咱們能夠在官網選項配置找到更多的配置規則。

這樣配置後雖然能修復代碼了，可是若是遇到另外一個也執拗己見的擴展，好比咱們引入eslint-config-standard這個擴展，它也有本身的代碼風格；若是經過 Prettier 格式化，standard 不幹了；若是經過 standard 自動修復，那麼 Prettier 又要報錯了。

咱們能夠利用extends中最後一個覆蓋前面擴展的特性，咱們將eslint-config-prettier配置在 extends 最後，就可以關閉一些與Prettier的規則：

{
    extends: ["standard","plugin:prettier/recommended"]
}
複製代碼

以後須要在 setting.json 中配置

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
  "editor.codeActionsOnSave": {
        "source.fixAll": true
        ("source.fixAll.eslint": true)
    }
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程