配置eslint
在react项目中配置eslint,并启用保存自动格式化功能
第一步
npm i eslint typescript -D
第二步
在项目根目录,运行npx eslint --init
按交互提示安装相关插件
1 会提示你使用什么样规则的eslint 我们选第三种
2 提示你的项目使用什么样的模块 选第三个
3 提示你的项目使用 那个框架 选第一个
4 提示是否使用TypeScript 选择是
5 提示在那个环境运行 游览器还是node 我们都选中
6 定义代码风格
7 定义 风格指南
8 配置文件格式
第三步
设置vscode的自动保存格式化
在项目根目录下,补充配置文件:.vscode\settings.json
,其内容如下:
{
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".tsx"]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
到此eslint 设置便完成 不过eslint并不能深入到jsx代码中来格式化,所以需要额外的工具。
配置-引入prettier-now
第一步
安装vscode插件prettier-now
第二步
补充配置
.vscode\settings.json中
{
"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"
}
}
当你保存Ctrl+S格式化时 eslint与这个项目配置有问题时 可以在用户区看一下你是否配置了
这个注释了就好了
如果报'no-use-before-define' 可以在.eslintrc.js的rules中配置 'no-use-before-define': 'off'
这一行代码 这个配置还是有些不完整 欢迎━(*`∀´*)ノ亻!大家一起讨论学习