统一代码风格
代码风格问题，已经是一个老生常谈的问题，出现问题的原因就不一一表述了（想要了解的请自行百度），通过以下方法可规范代码风格问题，让代码简洁、明了。
方法一
通过 prettier 与 onchange 监听代码变动，进行格式化
npm install --save-dev onchange prettier
// package.json
// windonws 用户配置需要双引号并进行转义，例如配置 'src/**/*.js' ，配置转义后为\"src/**/*.js\"
// 'src/**/*.js' 含义为项目目录下 src 文件夹内所有的 js，可配置更多文件，具体根据 prettier 文档查询
"scripts": {
"format": "onchange \"src/**/*.js\" -- prettier --write {{changed}}"
}
- 运行命令，运行后，进行代码保存操作时会自动格式化代码
npm run format
方法二
使用 eslint + prettier，此处讲述已配置 eslint 后的步骤。
附：vue-cli项目：eslint安装、配置
npm install --save eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
安装完成后，在vue-cli项目根目录，创建.eslintrc.js文件
eslint-plugin-vue配置文件与规则：eslint-plugin-vue官方教程
// .eslintrc.js 示例
module.exports = {
extends: [
'plugin:vue/recommended'
],
rules: {
'no-alert': 0,
'semi': [2, "always"], // 自动补充分号
'quotes': ["error", "single"], // 使用单引号
// 禁止对象字面量中出现重复的 key
'no-empty': 1,
// 禁止出现重复的 case 标签
'no-duplicate-case': 2,
// 禁止对象字面量中出现重复的 key
'no-dupe-keys': 2,
// 禁止 function 定义中出现重名参数
'no-dupe-args': 2,
// 指定程序中允许的最大环路复杂度
complexity: ['error', 5],
// 要求 return 语句要么总是指定返回的值，要么不指定
'consistent-return': 1,
// 强制所有控制语句使用一致的括号风格
curly: 2,
// 要求使用 === 和 !==
eqeqeq: 2,
// 强制每个文件中包含的的类的最大数量
'max-classes-per-file': ['error', 1],
// 不允许在 case 子句中使用词法声明
'no-case-declarations': 2,
// 禁止 if 语句中 return 语句之后有 else 块
'no-else-return': 2,
// 禁止使用空解构模式
'no-empty-pattern': 2,
// 禁用 eval()
'no-eval': 2,
// 禁止扩展原生类型
'no-extend-native': 2,
// 禁止 case 语句落空
'no-fallthrough': 2,
// 禁止数字字面量中使用前导和末尾小数点
'no-floating-decimal': 2,
'no-global-assign': 2,
// 禁止 this 关键字出现在类和类对象之外
'no-invalid-this': 2,
// 禁用不必要的嵌套块
'no-lone-blocks': 2,
// 禁止出现多个空格
'no-multi-spaces': 2,
// 禁止多行字符串
'no-multi-str': 2,
// 禁止重新声明变量
'no-redeclare': 2,
// 禁止在 return 语句中使用赋值语句
'no-return-assign': 2,
// 禁用不必要的 return await
'no-return-await': 2,
// 禁止自我赋值
'no-self-assign': 2,
// 禁止使用不带 await 表达式的 async 函数
'require-await': 2,
// 要求或禁止 var 声明中的初始化
'init-declarations': 2,
// 禁止将标识符定义为受限的名字
'no-shadow-restricted-names': 2,
// 要求或禁止类成员之间出现空行
'lines-between-class-members': 1,
// 要求使用骆驼拼写法
camelcase: 2,
// 要求或禁止在注释前有空白
'spaced-comment': ['error', 'always'],
// 强制函数中的变量在一起声明或分开声明
'one-var': ['error', 'never'],
'line-comment-position': ['error', { position: 'above' }],
// 强制函数最大代码行数
'max-lines-per-function': ['error', 30],
'lines-around-comment': [
'error',
{
beforeBlockComment: true,
allowClassStart: true,
allowObjectStart: true,
},
],
}
}
- 配置 prettier
注：关于 eslint 配置问题，可在使用脚手架搭建项目时，勾选 Eslint 选项。如是已有项目，建议自行百度配置 Eslint。Eslint 文档
安装所需依赖包：
- prettier：代码格式化程序，具体信息与支持文件自行在链接内查看。
- eslint-plugin-prettier: 将Prettier作为ESLint规则运行.
- eslint-config-prettier: 关闭所有不必要的或可能与Prettier冲突的规则。
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
// .eslintrc.js
module.exports = {
extends: [
'plugin:prettier/recommended'
]
}
// package.json
// 为 src 文件夹下的 js、vue 文件执行 eslint 格式化并且保存
"scripts": {
"lint": "eslint --fix --ext .js,.vue src"
}
- 运行命令后，自动进行 src 文件夹下的 js、vue 代码自动格式化
npm run lint
额外快捷方法
进行方法二配置后，再联动 IDE，在进行已配置的文件保存时，自动格式化，无需执行代码。
IDE 例子：vs code (其他IDE配置请自行百度)
【ctrl +shift +p】——【settings.json(首选项：打开设置（json）)】，打开IDE 的 settings.json 文件后，进行以下配置
注：vs code 版本 1.52.1 (user setup)，老版本配置可能存在不一致（自行百度）
// settings.json
// 保存时eslint自动修复错误
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
Powered by Waline v2.15.8