1. VS Code ESLint插件安裝
VS Code應該已經預設安裝ESLint,如沒有的話,到Extensions搜尋ESLint安裝。
2. 安裝全域ESLint
執行以下命令以全域安裝ESLint:
npm install -g eslint
3. 安裝所需套件
例如要安裝react plugin和babel-eslint:
npm install -g eslint-plugin-react @babel/eslint-parser
4. 設置全域 .eslintrc 檔案
在使用者目錄下建立.eslintrc檔案,以下為配置範例:
{
"env": {
"browser": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
'plugin:react/jsx-runtime',
],
"parser": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
requireConfigFile: false,
"babelOptions": {
"presets": ["/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/preset-react"]
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"linebreak-style": ["error", "unix"], // 要求使用 Unix 換行符(LF)
"semi": ["warn", "always"], // 要求語句末尾必須使用分號
"no-console": ["off"], // 允許使用 console
"eqeqeq": ["warn", "always"], // 要求使用 === 和 !==
"new-cap": "off", // 關閉強制使用大寫字母命名建構函
"no-unused-vars": "warn", // 未使用的變量僅發出警告
"no-mixed-spaces-and-tabs": "off",
"no-undef": "off",
"react/prop-types": "off"
}
}
5. 配置 VS Code 的 settings.json
"eslint.options": {
// 指定全域插件位置
"resolvePluginsRelativeTo": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules",
// 指定全域.eslintrc位置
"configFile": "/Users/andy.tsai/.eslintrc"
},
// 指定全域eslint位置
"eslint.nodePath": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules",
這些都指定好路徑,可以避免許多錯誤,
例如resolvePluginsRelativeTo沒配置好,可能就會遇到 Failed to load plugin 'react' declared in 'PersonalConfig': Cannot find module 'eslint-plugin-react'
Require stack:
類似的錯誤,表示 VS Code 無法找到全域的 eslint-plugin-react。
6. 完成
重新開啟VS Code,就完成了。
也可以看OUTPUT - ESLint,看看是否成功執行,或是有什麼Error。
如果報Error: Failed to load parser 'babel-eslint' declared in '.eslintrc': Cannot find module 'babel-eslint'
,
檢查一下.eslintrc的@babel/eslint-parser,要用指定路徑的方式配置
"parser": "/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/eslint-parser",
"parserOptions": {
"babelOptions": {
"presets": ["/Users/UserName/.nvm/versions/node/v14.21.2/lib/node_modules/@babel/preset-react"]
}
},