接手一个vue2 老项目发现项目格式化失效,重新配置eslint + prettier 保持代码风格统一
安装相对应插件
1.安装 babel-eslint
这是一个 ESLint 的解析器,用于解析 JavaScript 代码
npm install babel-eslint --save-dev
# 或者
yarn add babel-eslint --dev
2.安装 babel-eslint
这是一个 Vue.js 项目专用的 ESLint 插件,提供了一些用于检查 Vue.js 单文件组件的规则。在这个配置中
npm install eslint-plugin-vue --save-dev
# 或者
yarn add eslint-plugin-vue --dev
3.安装 @vue/standard
这是 Vue.js 官方的标准 JavaScript 风格,提供了一组与官方推荐的代码风格相符的 ESLint 规则。在这个配置中
npm install @vue/standard --save-dev
# 或者
yarn add @vue/standard --dev
根目录新建.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' // 关闭缩进检查
}
}
新建.eslintignore文件
eslintignore用来告诉 ESLint 忽略特定的文件或文件夹,不对它们进行代码检查的配置文件。通常情况下,你可能会希望在项目中包含一些不需要被 ESLint 检查的文件,比如第三方库、自动生成的文件、测试文件等。
根据项目自行配置
/_templates
# *
dist
public
publicPath.js
*.js
根目录新建.prettierrc文件
{
"printWidth": 100, // 每行代码的最大字符数
"singleQuote": true, // 使用单引号定义字符串
"semi": false, // 是否在语句末尾添加分号
"tabWidth": 2, // 缩进的空格数
"trailingComma": "none", // 数组或对象末尾是否添加逗号
"jsxSingleQuote": false, // 在 JSX 中是否使用单引号
"quoteProps": "as-needed" // 对象属性的引号风格,仅在必要时添加引号
}
.prettierignore
.prettierignore 文件是用来告诉 Prettier 忽略特定的文件或文件夹,不对它们进行代码格式化的配置文件
可根据项目自行配置
/_templates
dist