- 在項(xiàng)目下安裝必要插件
//無論使用yarn還是npm，需要全局安裝eslint
npm install eslint -g 全局安裝
//如果你使用Npm
npm install eslint babel-eslint eslint-plugin-react eslint-config-alloy -D
//如果你使用yarn
yarn add eslint babel-eslint eslint-plugin-react eslint-config-alloy -D
- 在項(xiàng)目目錄下創(chuàng)建配置文件 -
.eslintrc.js
//.eslintrc.js
module.exports = {
extends: [//使用哪些默認(rèn)規(guī)則來檢查,由于我們安裝了 eslint-config-alloy 所以直接使用它的規(guī)則
'alloy',
'alloy/react',
],
env: {
browser: true,
commonjs: true,
es6: true
},
globals: {
'$':true,//這里可以將一些全局變量忽略檢查,如果你沒有則可以不用配置
},
rules: {
// 自定義你的規(guī)則,https://eslint.bootcss.com/docs/rules/ 可以查找規(guī)則
'no-debugger':1,//比如發(fā)現(xiàn)debugger時只是警告脏榆，不要報(bào)錯
'indent': [1, 2], // 控制一個tab縮進(jìn)為2個空格
'quotes': [1, 'single'], // 要求字符串使用單引號包裹
}
};
- 配置vscode
1忆蚀、首先需要在vscode內(nèi)自己把eslint的插件安裝好
2时肿、在vscode的setting.json中增加配置
{
"eslint.validate": [
"javascript",
"javascriptreact",//增加了對react的支持
],
// 開啟保存時自動根據(jù)規(guī)則會修復(fù)一些問題蹄梢，比如剛才我們配置了縮進(jìn)和單引號包裹字符串嫉父，那么這個時候會自動格式化這些問題
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
- 排除某些文件夾或者文件不實(shí)用eslint檢測
1论熙、在需要不檢測的文件頭部增加/* eslint-disable */注釋
2福青、創(chuàng)建.eslintignore文件，配置需要忽略的文件//.eslintignore 加入要過濾的文件夾和文件 node_modules webpack.config.js
加入prettier來幫我們格式化代碼
1脓诡、首先vscode內(nèi)安裝好prettier插件
2无午、在項(xiàng)目根目錄下增加配置文件 prettier.config.js
module.exports={
//簡單配置幾個常用的格式化方案
tabWidth: 2,//1個tab用2個空格代替
useTabs: false,
printWidth: 120,
semi:true,//末尾必須有分號
singleQuote:true,//使用單引號包裹字符串
jsxSingleQuote:true //jsx內(nèi)也使用單引號包裹字符串
//其他規(guī)則可以在https://prettier.io/docs/en/options.html查詢
};
- 然后在vscode的setting.json內(nèi)增加配置
{
"editor.formatOnSave": true,//當(dāng)保存的時候，自動格式化
//指定react和js都使用prettier來作為格式化工具
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
好了接下來試試在編輯代碼后按保存看看
如果不想自動格式化代碼祝谚，可以將 "editor.formatOnSave": false 然后通過鼠標(biāo)右鍵點(diǎn)擊格式化命令來隨時格式化
相關(guān)文件引用及推薦
從零構(gòu)建前端 ESLint 工作流（2020手把手版）
https://mp.weixin.qq.com/s/fR5TD-ibsOffS9bo0l9iWAvscode ESLint 校驗(yàn)React
http://www.reibang.com/p/f2fb689c6837eslint-config-alloy項(xiàng)目
https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md
