官网
https://eslint.bootcss.com/docs/user-guide/getting-started
1 创建项目
npm create vite@latest eslint-app -- --template vue
cd eslint-app
npm install
2 安装eslint包
npm install eslint -D
3 初始化 eslint 配置
npm init @eslint/config
- 根据提示选择
[外链图片转存中…(img-TJAqTTnq-1667108909089)]
4 生成文件生成文件:.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/vue3-essential',
'standard-with-typescript'
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
5 添加 eslint 命令
// package.json
{
"scripts": {
"eslint": "src/**/*.js"
}
}
6 .eslintrc* 里面的 rules 中配置
rules: {
quotes: ['error', 'single'],
semi: ['error', 'always']
}
- “off” 或 0 - 关闭规则
- “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)
- “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
7 运行 eslint 命令 npm run eslint
[外链图片转存中…(img-mYRXnRNm-1667108909091)]
8 prettier
- 一个插件,可以辅助我们进行代码格式化
- vscode首选项 -> 保存时格式化 (format on save)
- 配置文件:
.prettierrc.json
// .prettierrc.json
{
"singleQuote": true
}