vscode+eslint+prettier自动格式化配置
以下基于手动创建eslint配置
一、初始化eslint
首先通过命令创建.eslintrc.js文件。 执行:
eslint --init
-
选择第三项 检查语法、发现问题并强制执行代码风格 如【图一】
-
我们使用JavaScript 模块(导入/导出)如【图二】
-
选择自己的一个模版语言。这里用的是react 如【图三】
-
集成ts。如【图四】
-
选择在浏览器中运行。如【图五】
-
是否使用流行风格 如【图六】
-
使用哪一种风格?这里使用airbnb 如【图七】
-
以何种格式输出配置文件? 这里是用js
-
是否下载依赖? 选择是
-
下载完成并生成.eslintrc.js
-
生成之后我们可以自定义一下配置 如下
会自动安装下方依赖
eslint-plugin-import@2.25.4
eslint-plugin-jsx-a11y@6.5.1
eslint-config-airbnb@19.0.4
eslint-plugin-react@7.28.0
eslint@8.8.0
eslint-plugin-react-hooks@4.3.0
@typescript-eslint/parser@5.11.0
@typescript-eslint/eslint-plugin@5.11.0
module.exports = {
root: true,
env: {
node: true,
browser: true,
es6: true,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
project: './tsconfig.json',
},
plugins: ['react', 'react-hooks', '@typescript-eslint'],
extends: ['plugin:react/recommended', 'airbnb'],
parser: '@typescript-eslint/parser',
rules: {
// 禁止使用 var
'no-var': 'error',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/prop-types': 'off',
},
};
[图一]
[图二]
[图三]
[图四]
[图五]
[图六]
[图7]
[图8]
[图9]
二、安装插件
vscode+eslint 基本上是我们每一个猿人必备的了 不用vscode请略过
下面就vscode根据eslint+prettier 自动格式化记一个随笔
首先我们要安装eslint 然后我们需要安装prettier工具
下载完之后我们需要一个配置,这个配置可以让我们在chrl+s的时候自动格式化代码。
三、配置vscode
打开vscode的 settings-> default formatter 勾选咱们的prettier 工作区和用户区都要选择哦。
好了 我们安装完成了。但是有时prettier和eslint会有一些小冲突,这个时候就需要我们手动去指定规则(使用eslint的还是prettier的规则)
四、 解决冲突
那我们如何解决这个冲突呢?有两种方法
- 在我的 .eslintrc.js 文件中配置prettier 如下。 如果想看详细的一个配置请看我上一篇 自我沉淀webpack5+react+eslint+tslint
.eslintrc.js 文件中在plugins中加入 'prettier'
const path = require('path');
module.exports = {
root: true,
env: {
node: true,
browser: true,
es6: true,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
tsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
project: ['./tsconfig.json'],
},
plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],
extends: ['plugin:react/recommended', 'airbnb'],
parser: '@typescript-eslint/parser',
rules: {
'import/no-unresolved': 'off',
'import/no-unresolved': 'off',
'no-nested-ternary': 'off',
'react/jsx-filename-extension': 'off',
'import/extensions': 'off',
// 禁止使用 var
'no-var': 'error',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/prop-types': 'off',
},
};
再创建 .prettierrc 文件,书写规则,然后在eslint中将冲突的语法禁掉
内容如下 以下内容只是其中一小部分详情请查阅 prettier.io/ 代码如下
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"object-curly-newline": false,
"no-nested-ternary": false,
"operator-linebreak": true,
"global-require": false,
"overrides": [
{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}
]
}