vue2+ eslint + prettier代码风格统一_vue2 eslint

接手一个vue2 老项目发现项目格式化失效，重新配置eslint + prettier 保持代码风格统一

安装相对应插件

1.安装 babel-eslint

这是一个 ESLint 的解析器，用于解析 JavaScript 代码

npm install babel-eslint --save-dev
# 或者
yarn add babel-eslint --dev

1
2
3
4

2.安装 babel-eslint

这是一个 Vue.js 项目专用的 ESLint 插件，提供了一些用于检查 Vue.js 单文件组件的规则。在这个配置中

npm install eslint-plugin-vue --save-dev
# 或者
yarn add eslint-plugin-vue --dev
1
2
3

3.安装 @vue/standard

这是 Vue.js 官方的标准 JavaScript 风格，提供了一组与官方推荐的代码风格相符的 ESLint 规则。在这个配置中

npm install @vue/standard --save-dev
# 或者
yarn add @vue/standard --dev

1
2
3
4

根目录新建.eslintrc.js 文件

module.exports = {
  root: true, // 根目录设置为true，表示当前配置文件是根配置文件，ESLint 不会再向父级目录查找配置文件
  env: {
    node: true // 指定代码运行的环境为 Node.js
  },
  extends: ['plugin:vue/essential', '@vue/standard'], // 继承的规则配置，包括 Vue.js 相关的规则和 Vue.js 官方标准规则
  parserOptions: {
    parser: 'babel-eslint' // 使用 babel-eslint 解析器解析 JavaScript 代码
  },
  globals: {
    BMap: true // 全局变量 BMap 设置为 true，表示允许在代码中使用 BMap 变量而不报错
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 控制在生产环境下是否允许使用 console，生产环境下输出警告，其他情况下关闭
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 控制在生产环境下是否允许使用 debugger，生产环境下输出警告，其他情况下关闭
    'no-console': 'off', // 关闭 no-console 规则，允许使用 console，但前面已经设置了条件规则
    quotes: [1, 'single'], // 强制使用单引号
    'no-irregular-whitespace': 2, // 禁止使用不规则的空白符
    'no-multiple-empty-lines': [2, { max: 1 }], // 限制最多连续出现一行空行
    'use-isnan': 2, // 使用 isNaN() 函数进行 NaN 判断
    'vars-on-top': 2, // 声明的变量要放在函数顶部
    'semi-spacing': [2, { before: false, after: true }], // 分号前后空格
    'no-multi-spaces': 1, // 禁止多余的空格
    'no-trailing-spaces': 2, // 禁止行尾空格
    'comma-spacing': 2, // 逗号前后的空格
    'space-before-function-paren': ['error', 'never'], // 函数名和括号之间不允许有空格
    'no-unused-vars': 'warn', // 未使用的变量发出警告
    'no-tabs': 'off', // 关闭禁止使用制表符的规则
    'no-unreachable': 'off', // 关闭禁止出现不可达代码的规则
    'space-before-function-paren': 'off', // 关闭函数名和括号之间是否需要空格的规则
    eqeqeq: 'off', // 关闭使用 === 和 !== 代替 == 和 != 的规则
    indent: 'off' // 关闭缩进检查
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

新建.eslintignore文件

eslintignore用来告诉 ESLint 忽略特定的文件或文件夹，不对它们进行代码检查的配置文件。通常情况下，你可能会希望在项目中包含一些不需要被 ESLint 检查的文件，比如第三方库、自动生成的文件、测试文件等。
根据项目自行配置

/_templates
# *
dist
public
publicPath.js
*.js
1
2
3
4
5
6

根目录新建.prettierrc文件

{
  "printWidth": 100,         // 每行代码的最大字符数
  "singleQuote": true,       // 使用单引号定义字符串
  "semi": false,             // 是否在语句末尾添加分号
  "tabWidth": 2,             // 缩进的空格数
  "trailingComma": "none",   // 数组或对象末尾是否添加逗号
  "jsxSingleQuote": false,   // 在 JSX 中是否使用单引号
  "quoteProps": "as-needed"  // 对象属性的引号风格，仅在必要时添加引号
}
1
2
3
4
5
6
7
8
9

.prettierignore

.prettierignore 文件是用来告诉 Prettier 忽略特定的文件或文件夹，不对它们进行代码格式化的配置文件
可根据项目自行配置

/_templates
dist
1
2