eslintrc.js基礎配置

官網教程：https://eslint.bootcss.com/docs/user-guide/configuring

eslintrc.js基本配置：https://juejin.cn/post/6975078700622544904#heading-5

plugins和extends的區別：https://juejin.cn/post/6859291468138774535#heading-1

 

module.exports = {
  root: true, // // 告訴eslint找當前配置文件不能往父級查找
  env: { // 全局環境
    browser: true,
    es2021: true, // 例子：這樣設置之後，就支持新的 ES6 全局變量和類型
    node: true, // 例子：這樣設置之後，就支持新的 node 全局變量和類型
  },
  parserOptions: {  // 優先級低於parse的語法解析配置
    parser: '@typescript-eslint/parser', // 指定ESlint的解析器
    ecmaVersion: 2020, // 允許使用ES語法
    sourceType: 'module', // 允許使用import
  },
  extends: [ // 讓 ESlint 添加規則模塊
    "eslint:recommended", // 啓用 ESLint 核心規則，這些規則報告一些常見問題。
    "plugin:vue/essential", // 例子：讓 ESlint 能檢查vue相關代碼語法
    "plugin:@typescript-eslint/recommended" // 例子：讓 ESlint 能檢查typescript相關代碼語法
  ],
  plugins: [], // 使用第三方插件檢查規則
  rules: { // 規則，手動自定義代碼規範
    'quotes': ['warn', 'single'], // 引號類型 `` '' ""
  },
  globals: { // 全局變量
    變量名: 'readonly', // false、readable、readonly 這 3 個是等價的，表示變量只可讀不可寫
    變量名: 'writable', // true、writeable、writable 這 3 個是等價的，表示變量可讀可寫；
  }
};

 

parserOptions：解析器選項

指定你想支持的語言，默認支持es5。指定啥語言，eslint就按照啥語法檢查。

 

extends: 添加規則模塊

讓 ESlint 添加規則模塊，如果規則衝突，位置靠後的包將覆蓋前面的。rules 的規則優先級高於 extends

說白了，就是別人提前寫好了一套 rules，你直接拿過來用就行。不用自己一個一個寫 rules 規則。

 

globals: 全局變量

有時候，我們需要訪問一些全局定義的變量，尤其是在我們使用第三方庫的時候是瀏覽器端，也可以是案例服務器端。

因爲代碼中沒有引用變量，所以 eslint 會拋出一個錯誤，說變量沒有定義。

Eslint 讓我們指定全局變量。這種配置可以讓 eslint 知道一個變量的存在，即使它沒有在代碼中被引用