18_eslint

官网

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: {
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5 添加 eslint 命令

// package.json
{
  "scripts": {
    "eslint": "src/**/*.js"
  }
}
1
2
3
4
5
6

6 .eslintrc* 里面的 rules 中配置

rules: {
    quotes: ['error', 'single'],
    semi: ['error', 'always']
}
1
2
3
4

• “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
}
1
2
3
4