VScode配置ESlint+Prettier
本文仅为学习笔记,在此感谢大佬的创作。
原作者bilibili 爱吃薯片的内存条
如有侵权,联系删!!
1、VScode搜索并安装这两个插件
ESLint
Prettier
安装完成之后,按下ctrl+shit+p,输入setting.json
,选择首选项:打开设置(json)回车 在设置中插入如下配置
// eslint配置项,保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 默认使用prettier格式化支持的文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 自动设定eslint工作区
"eslint.workingDirectories": [
{ "mode": "auto" }
],
2、安装TypeScript开发环境
yarn add typescript --dev
3、为你的项目安装以下插件
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev
或者
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --dev
4、新建eslint配置文件
在项目根目录下新建 删除线原因看下文.eslintrc.js
文件 写入如下内容
module.exports = {
parser: "@typescript-eslint/parser", // 指定ESLint解析器
parserOptions: {
sourceType: "module", // 允许使用导入
},
extends: [
"plugin:@typescript-eslint/recommended", // 使用@ typescript-eslint / eslint-plugin中的推荐规则
"prettier/@typescript-eslint", // 使用eslint-config-prettier禁用一些与Prettier冲突的ESLint规则
"plugin:prettier/recommended" // 启用eslint-plugin-prettier和eslint-config-prettier,使编辑器显示错误提示,确保这项是扩展数组中的最后一个配置
],
rules: {
// 放置ESLint规则的位置。可用于覆盖从扩展配置中指定的规则
// 例如 "@typescript-eslint/explicit-function-return-type": "off",
},
};
注意!!! 因为版本原因运行项目时会报错
Cannot read config file: C:\Users\Administrator\Desktop\getStarted\started\node_modules\eslint-config-prettier\@typescript-eslint.js
Error: "prettier/@typescript-eslint" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21
Referenced from: C:\Users\Administrator\Desktop\getStarted\started\.eslintrc.js
所以请不要新建.eslintrc.js
文件,如果需要配置,请进入node_modules\eslint-config-prettier\prettier
进行配置
5、配置Prettier
这步是可选的,如果pretter的默认配置你觉得用着蛋疼,那么你可以在项目根目录下新建.prettierrc
修改它的配置,下面列举一些常用设置,全部为默认选项,请按需修改
后面的注释记得删除,不然会报错
{
"printWidth": 80, //限制每行字符个数
"tabWidth": 2, //指定每个缩进级别的空格数
"useTabs": false, //使用制表符而不是空格缩进
"semi": true, //在语句末尾打印分号
"singleQuote": false, //使用单引号而不是双引号
"trailingComma": "es5", //多行时尽可能打印尾随逗号
"bracketSpacing": true, //在对象文字中的括号之间打印空格
"arrowParens": "always", //始终给箭头函数的参数加括号
"htmlWhitespaceSensitivity": "css", //指定HTML文件的全局空格敏感度
"endOfLine": "lf" //检测换行符类型,如果出现大量换行符报错,可以修改为auto不检测
}
更多配置可参考Pretter文档
END…
如果还想配置vue、react文件相关的格式化,可以参考下面的说明
https://github.com/prettier/eslint-config-prettier
参考资料