如何配置ESLint？

一、 配置 JDK 和 Linux

在使用ESLint之前，需要確保操作系統上已經配置好JDK和Linux。在這個過程中，如果出現任何錯誤或者不確定，可以在終端中運行相應的命令行來檢查。

二、 ESLint怎麼配置

2.1 安裝ESLint

 npm install eslint --save-dev

上述命令是通過npm包管理器安裝ESLint模塊並且將其保存在devDependencies的位置，可以通過package.json文件來記錄模塊依賴。

2.2 配置文件

ESLint的配置文件是一個json或者js格式的文件，通常稱之為.eslintrc.json或者.eslintrc.js。它用於配置檢查器的規則和插件，可以自定義一些規則來滿足項目的需求。下面是一份典型的ESLint配置文件示例：

{
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "warn",
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

其中:

• extends選項可以繼承一些預設的規則，例如：”eslint:recommended”，它包含了一系列推薦的規則。
• rules選項可以定製一些規則，例如：”no-console”，它警告使用console語句。
• indent選項指定了縮進格式，它的值可以是數字或者字符串，例如：2表示使用2個空格縮進。
• quotes選項指定了字符串的引號格式，它的值可以是單引號或者雙引號。
• semi選項指定了是否使用分號，它的值可以是always，never和auto。

2.3 ESLint命令行

ESLint還提供了一些命令行工具，可以方便地執行檢查操作。比如說，使用以下命令就可以執行默認的eslint規則，其中test.js是待檢查的文件。

eslint test.js

除此之外，還可以通過一些選項來擴展命令行工具的功能。比如說，使用以下命令就可以執行scripts目錄下的檢查文件。

eslint "scripts/**/*.js"

三、 ESLint插件有什麼用？

ESLint提供了一些插件，可以添加一些規則或者擴展一些現有規則的功能。安裝插件的方式與安裝其他npm包的方式相同。

3.1 JSX/React

如果需要使用ESLint檢查jsx或者react語法，需要安裝相應的插件。下面是插件的安裝命令。

 npm install eslint-plugin-react --save-dev

然後，在配置文件中，需要添加以下內容：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "react"
  ]
}

其中，extends選項中新增了plugin:react/recommended和plugins選項中新增了react。如此配置之後，ESLint就可以檢查.jsx和.js文件中的react代碼了。

3.2 Vue

如果需要使用ESLint檢查vue語法，需要安裝相應的插件。下面是插件的安裝命令。

 npm install eslint-plugin-vue --save-dev

然後，在配置文件中，需要添加以下內容：

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "plugins": [
    "vue"
  ]
}

其中，extends選項中新增了plugin:vue/recommended和plugins選項中新增了vue。如此配置之後，ESLint就可以檢查.vue和.js文件中的vue代碼了。

3.3 TypeScript

如果需要使用ESLint檢查TypeScript語法，需要安裝相應的插件。下面是插件的安裝命令。

 npm install @typescript-eslint/eslint-plugin --save-dev

然後，在配置文件中，需要添加以下內容：

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "@typescript-eslint"
  ]
}

其中，extends選項中新增了plugin:@typescript-eslint/recommended和plugins選項中新增了@typescript-eslint。如此配置之後，ESLint就可以檢查.ts和.js文件中的TypeScript代碼了。

參考資料

• ESLint官方文檔
• eslint-plugin-react
• eslint-plugin-vue
• @typescript-eslint/eslint-plugin