1.配置eslint
1.1安装eslint
npm i eslint typescript -D
1.2 安装响应插件
1.2.1 安装完eslint后,安装响应插件
npx eslint --init
1.2.2 使用什么样规则的eslint
1.2.3 项目什么类型
1.2.4 项目使用的什么框架
1.2.5 项目使用TypeScript吗?
如果前面没安装一会会报错,先选yes后面再把 typeScript
装上
1.2.6 代码在哪运行
1.2.7 代码/项目风格
1.2.8 风格指南
1.2.9 配置文件格式
1.2.10 是否使用npm安装这些包
2.设置vscode的自动保存格式化
2.1 开启eslint
2.2 安装vscode插件prettier-now
2.3 ctrl
+s
补充配置
在.vscode\settings.json
中放入如下文件就可以ctr
+s
就可以自动保存了
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 编辑器设置 - 保存时做格式化
"editor.formatOnSave": true,
// 编辑器设置 - 默认采用prettier-now做格式化
// 如果使用的是prettier,这的设置应该是 esbenp.prettier-vscode
"editor.defaultFormatter":"remimarsal.prettier-now",
// 控制缩进
"prettier.useTabs": false, // 缩进不使用tab,使用空格
"prettier.tabWidth": 2, // 缩进字节数
// 函数声明时小括号前后要加空格
// 如果你使用prettier这一项是不能做选择的,导致和eslint默认配置的冲突
// 可以在百度中搜到很多的记录: https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
"prettier.spaceBeforeFunctionParen": true,
// react的jsx让>与结束标签同行
"prettier.jsxBracketSameLine": true,
"prettier.bracketSpacing": false, // 去掉数组内部前后的空格
"prettier.semi": false, // 不要给语句加;
"prettier.singleQuote": true, // 采用单引号
"prettier.trailingComma": "none", // 不要尾随逗号,
"prettier.printWidth": 80, // 每行超过80列就换行
// 在.js中,写div按下tab就可以自动补全,而不需要写<div再补全
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
3.改变规则
在.eslintrc.js
里面的rules可以修改规则。
如下一些常用的。
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['plugin:react/recommended', 'standard'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12
},
plugins: ['react', '@typescript-eslint'],
// rules:改变规则
rules: {
'no-unused-vars': 'warn', // 声明未使用的 ,warn表示警告不报错
'no-use-before-define': 'off', // react声明但是未被使用
'react/react-in-jsx-scope': 'off' // 要是用jsx必须引入React
}
}