ESLint是可以用来作为一种代码规范的校验工具,而Prettier则是代码格式化工具,二者配合使用可以使得我们的代码更加的健壮,并且易于维护,
1、为什么要使用ESLint?
ESLint可以为我们校验代码规范,帮助我们对不符合规范的代码进行提示,并且修改,比如:我不想在我的代码中使用var关键字,var会造成变量提升,而let则不会,并且拥有块作用域,所以我们可以设置 “no-var”:“1”来进行提示,当然也可以去继承某些规则,如vue的官方规则等,接下来讲一下如何去配置:
首先使用:
npm init @eslint/config
然后根据提示进行选择:
# 如何使用Eslint
? How would you like to use ESLint? ...
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style
# 你的项目使用什么类型的模块
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
# 您的项目使用哪个框架?
? Which framework does your project use? ...
React
> Vue.js
None of these
# 是否使用TypeScript
? Does your project use TypeScript? » No / Yes
# 你的代码在哪里运行?
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
# 你希望你的配置文件是什么格式?
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
# 您现在要安装它们吗
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes
按照这种格式安装完成后会生成一个文件为.eslintrc.cjs
他的文件格式有很多,具体的我们可以去查看文档eslint,然后进入我们的配置文件,当前配置是默认的配置文件,我们需要将其修改为我们自己习惯的配置信息:
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting',
'prettier',
],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
tsx: true,
},
},
rules: {
'no-var': 1,
'no-debugger': 'off',
//禁用 TypeScript ESLint 扩展中的显式 any 类型检查规则
'@typescript-eslint/no-explicit-any': 'off',
//可以省略对这些函数的返回类型和参数类型的显式注解
'@typescript-eslint/explicit-module-boundary-types': 'off',
'vue/valid-template-root': 'off',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'always',
component: 'always',
},
svg: 'always',
math: 'always',
},
],
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
},
],
},
};
然后,我们需要添加eslint忽略文件,他的格式和git忽略文件格式一致,为.eslintignore,添加完文件后,进行如下配置:
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
接下来我们进行Prettier的配置,
使用:
npm install --save-dev --save-exact prettier
然后,会出现一个配置文件为.prettierrc,然后加入我们的配置内容:
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": true,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "always",
"insertPragma": false,
"endOfLine": "auto"
}
同时也需要配置忽略文件,.prettierignore,添加忽略配置:
node_modules
dist
dist-ssr
*.local
.npmrc
然后这个时候会出现冲突,我们需要安装一个插件
npm install --save-dev eslint-config-prettier
然后回到我们的eslint配置中,我在extends选项中配置的prettier就起到了作用,可以忽略prettier的配置,这样我们就配置好了eslint和prettier,然后回到vscode中,在编辑器中右键->使用...格式化文档->配置默认格式化程序->prettier-code-fromatter,这样在我们保存的时候就会自动格式化文件了。