eslint使用介紹

ESlint介紹和使用

前言

同一個功能不同程序的代碼就像同一道紅燒肉不同人的做法一樣，各不相同，各有味道。在我們自己寫項目就像我們自己做一道菜給自己吃，只要自己喜歡吃就行。但是在公司里項目是團隊開發，相當於是廚師給一桌子客人做菜，如果僅僅只考慮自己的喜好是不行的，還必須得考慮其他團隊成員的喜好，如果每一個開發者都按照自己的風格開發，那么就會出現一個項目的代碼風格多異，不變維護，這也是ESLint誕生的基礎。

ESLint介紹

• 官網地址
• ESLint是一個靜態的代碼檢查工具，因為js的弱類型，在開發的時候比較容易出錯，而且又不需要編譯就可以直接執行，這樣有時候在運行的時候會出現很多錯誤，只能依靠不斷斷點調試來解決。這樣很多錯誤在編碼的時候不容易暴露，會導致編程的成本增加。
• ESLint的初衷是為了讓程序員可以創建自己的檢測規則。ESLint的所有規則都被設計成可插入的。
• ESLint可以設置公司項目編碼的細節規范，使得整個項目的代碼規范保持統一。

ESLint的安裝和使用

使用命令行

1. 安裝node，ESLint依賴於node的環境。node官網，建議下載LTS版本。
2. 全局安裝ESLint，作為命令來使用
   • npm i -g eslint
3. 新建一個文件夾vue執行npm init -y，生成package.json(在初始化eslint之前需要初始化eslint)
4. 初始化eslint配置文件.eslint
   • eslint --init

       D:\vue>eslint --init
           How would you like to use ESLint?
               To check syntax only 
               > To check syntax and find problems
               To check syntax, find problems, and enforce code style
           What type of modules does your project use?
               > JavaScript modules (import/export)
               CommonJS (require/exports)
               None of these
           Which framework does your project use?
               React
               > Vue.js
               None of these
           Does your project use TypeScript? » No / Yes  No
           Where does your code run? ...  (Press <space> to select, <a> to toggle all, 
           <i> to invert selection)  a
               √ Browser
               √ Node
           What format do you want your config file to be in?
               > JavaScript
               YAML
               JSON
           Would you like to install them now with npm? » No / Yes  Yes
   

5. 等待依賴安裝完成，生成.eslintrc.js如下

       module.exports = {
           "env": {
               "browser": true,
               "es2021": true,
               "node": true
           },
           "extends": [
               "eslint:recommended",
               "plugin:vue/essential"
           ],
           "parserOptions": {
               "ecmaVersion": 13,
               "sourceType": "module"
           },
           "plugins": [
               "vue"
           ],
           "rules": {
           }
       };
   

6. 簡單配置規則，修改eslint下面的rules

       // eslintrc.js
       module.exports = {
           // ...
           'rules': {
               'quotes': ['error', 'single'],  // 字符串必須使用單引號 使用雙引號報錯
               'semi': ['error', 'never'] // 每句話結束不需要加分號，加了報錯
           }
       }
   

7. 修改package.json文件，添加script命令

       // package.json
       {
           // ...
           "scripts": {
               "lint": "eslint src",
               "lint-fix": "eslint src --fix"
           },
       }
       
   

   • eslint src 代表我們使用檢測src下面所有的文件
   • --fix 代表自動修復一些可以修復的語法錯誤（並不代表所有語法錯誤都可以修復）
8. 在項目根目錄下面新建一個src，在src下面新建一個test.js，文件夾目錄結構如下：
   • pro
     • node_modules
     • src
       • test.js
     • .eslintrc.js
     • eslint.md
     • package.json
9. 在test.js里面編寫代碼如下

       // test.js
       var a = "哈哈哈";
   

10. 在項目根目錄下打開命令行輸入如下命令
    • npm run lint會出現如下錯誤提示

        1:5   error  'a' is assigned a value but never used  no-unused-vars 
        ### 變量定義未使用
        1:9   error  Strings must use singlequote            quotes
        ### 必須要使用單引號
        1:14  error  Extra semicolon                         semi
        ### 代碼結束不能有分號
    

    • npm run lint-fix會出現如下錯誤提示，會修復上面兩個錯誤，但是還有保留一個錯誤未能修復

        1:5  error  'a' is assigned a value but never used  no-unused-vars
    

    • 同時test.js代碼變化為

        // test.js
        var a = '哈哈哈'
    

同步vscode配置

1. 安裝插件eslint
   • 
2. 在項目根目錄創建.eslintrc.js，此時vscode就可以提示eslint的語法錯誤，修改eslintrc.js可以同步修改vscode提示

.eslintrc.js文件介紹

• 官方地址
• eslintrc.js配置代碼

    module.exports = {
        'env': {
            'browser': true,
            'es2021': true,
            'node': true
        },
        'extends': [
            'eslint:recommended',
            'plugin:vue/essential'
        ],
        'parserOptions': {
            'ecmaVersion': 13,
            'sourceType': 'module'
        },
        'plugins': [
            'vue'
        ],
        'rules': {
            'quotes': ['error', 'single'],
            'semi': ['error', 'never']
        }
    }

• 組成部分
  • env 指定腳本的運行環境。每種環境都有一組特定的預定義全局變量
    • browser - 瀏覽器環境中的全局變量
    • es2021 啟用所有 ECMAScript 13 特性（該選項會自動設置 ecmaVersion 解析器選項為 13）
    • node Node.js 全局變量和 Node.js 作用域
  • extends 繼承已有的規則rules 下面這兩個都是已有的規則，我們可以直接繼承此規則
    • eslint:recommended
    • plugin:vue/essential
  • parserOptions 配置解析器的選項
    • ecmaVersion 默認情況下，ESLint使用的是ECMAScript5語法，此處我們設置的選項是 es13
    • sourceType 設置為 "script" (默認) 或 "module"（如果你的代碼是 ECMAScript 模塊)。
  • plugins ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它
    • vue 在配置的時候直接寫插件名稱即可，此處就是vue插件 插件名稱可以省略 eslint-plugin- 前綴
  • rules 啟用的規則及其各自的錯誤級別
    • 規則相對於復雜而且會經常配置，我們單獨來介紹規則

rules規則

• 介紹
  • eslint里面帶有很多規則，開發者可以根據自身需要進行添加和移除。
• 規則組成
  • 兩種形式
    • 規則名稱：嚴重程度
    • 規則名稱：[嚴重程度，規則屬性]
  • 嚴重程度
    • "off" 或 0 - 關閉規則
    • "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程序退出)
    • "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)
  • 規則屬性
    • 不是所有的規則都有屬性，有些規則只需要控制開啟或者關閉，但是有些規則需要配置屬性比如說quotes配置單引號single還是雙引號double
  • 規則名稱
    • indent 配置縮進規則
    • quotes 配置引號
    • no-console 配置是否禁用console
    • 更多規則表移除官方查看

結語

• 以上是eslint的規則配置，關於項目里面eslint千差萬別，具體依據項目需求而定。如有錯誤或者不足之處，歡迎在下面評論指正，謝謝！