- 项目搭建
-
配置ESLint
@eslint/create-config eslint配置文件初始化工具
pnpm install -D eslint @eslint/create-config
npm install -D eslint @eslint/create-config
yarn add -D eslint @eslint/create-config
三种方式,选择一种
如果不成功的话
npm install eslint --save-dev
生成配置文件
npx eslint --init
配置选择
# 选择2 我们会使用 prettier 进行代码风格校验
How would you like to use ESLint?
1.只检查语法
2.检查语法并提示问题
3.检查语法、提示问题并且强制使用一些代码风格
# 你的项目用的哪一种模块化方式 选择1
What type of modules does your project use?
1.ES6
2.CommonJS
3.None
# 使用的框架 选择2
Which framework does your project use?
1.React
2.Vue.js
3.None
# 项目是否使用TS yes
Does your project use TypeScript?
# 项目在哪里跑的 选择1
Where does your code run?
1.browser
2.node
# 项目用哪种配置文件 选择1
What format do you want your config file to be in?
1.JavaScript
2.YAML
3.JSON
新建eslint配置文件 ,文件名称可以为:.eslintrc.js 或者 .eslint.config.js
在rules中配置规则
module.exports = {
// 使 eslint 支持 node 与 ES6
env: {
browser: true,
es2021: true,
node: true,
},
// 引入推荐的语法校验规则
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
],
overrides: [],
// 选择使用的解析器
parser: 'vue-eslint-parser',
// 解析器的详细配置
parserOptions: {
// 使用最新版 ES 语法
ecmaVersion: 'latest',
// 使用 ESLint TS 解析器
parser: '@typescript-eslint/parser',
// 使用 ES 模块化规范
sourceType: 'module',
},
// 使用的插件
plugins: ['vue', '@typescript-eslint'],
// 自定义规则
rules: {},
};
在package.json文件中配置
"scripts": {
"lint:eslint": "eslint --cache --max-warnings 0 {src,mock}/**/*.{vue,ts,tsx} --fix",
},
新建.eslintignore进行配置,配置忽略文件
node_modules
*.md
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile
根目录下配置 /.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
3.配置Prettier
使用pnpm、npm、yarn安装
npm install -D prettier