uni-app 配置 eslint + prettier + stylelint + lint-staged + husky 代码格式校验
0x1 问题
更新时间：2021-01-13 19:10:25
2021-01-13 19:10:25
stylelint --fix --allow-empty-input增加--allow-empty-input参数防止意外提交卡顿。2020-11-13 14:30:02
增加
stylelintcss 代码校验，增加 package.json 校验命令
- 改变配置文件名符合共识
lint-staged拆分，更加可读uni-app开发项目最好用npm装包！2020-09-22 13:10:40
- 增加
commit之前用prettier按照配置格式化一遍。防止 一样的代码。2020-09-10 18:27:21
- 增加
eslint和prettier配置（对vscode用户友好）2020-08-28 21:41:15
- 去除
package.json内lint-staged的git add任务。- 增加
.eslintignore配置
公司需要用到 uni-app 开发新的项目，关于 uni-app 的介绍可以移步官网介绍。
核心就是用 Vue 写多端应用程序，但是 uni-app 的官方编辑器 HbuilderX 对代码校验这一块基本是空白。自己对Hbuilderx 配置也是有点模糊。
用 Vue-cli 创建的项目默认启用了保存代码检查，但是 uni-app 开发方式有点区别。编译和打包集成到了工具内部。所以我们只能在提交代码之前来做代码校验了。
关于为什么要做代码校验，一个人开发还好。要是团队合作，没有统一的规则。你是天津狗不理，我是长沙臭豆腐。那个工程写出来，基本没有维护性可言。要自己去维护别人写的代码就是一个态度，他写的代码像 一样，看不懂，只能重构。大多数人都是这个样子，没有例外。作为一个程序员，是要想想为什么那些大佬的代码一看就能懂，写代码就像写诗，在看看自己写的，过几天出了问题，等到亲切问候了全家之后再来看是自己写的。。。
由此可见规范是很重要的。
0202 年了， ECMAScript 都已经 2020 版本了，别再用
var定义变量、用==做if做判断了。
0x2 规范提交代码
可以参考约定式提交
一种用于给提交信息增加人机可读含义的规范。
简单来说就是提交代码的规范。
已经详细记录到个人的文档网站，这里不做详细介绍 地址
0x3 安装需要用到的依赖
npm i eslint babel-eslint eslint-plugin-vue husky lint-staged prettier @vue/eslint-config-prettier eslint-plugin-prettier -D
- eslint - 校验代码的核心
- babel-eslint - babel 插件，用 babel 解析 js 文件
- eslint-plugin-vue - vue 官方的 eslint 插件
- husky - 可以让 git hooks 的使用变得更简单方便
- lint-staged - 可以在 git staged 阶段的文件上执行 linters，简单点来说就是当我们运行
eslint或stylelint的命令时，只会检查我们通过git add添加到暂存区的文件，可以避免我们每次检查都把整个项目的代码都检查一遍
stylelint 需要用到的依赖
npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D
0x4 配置
以下设置适用于
cli创建的项目，HbuilderX创建的项目，路径需要修改。例如./src/改成./这样。
prettier
${app}/prettier.config.js
module.exports = {
// 行宽 default:80
printWidth: 100,
// tab 宽度 default:2
tabWidth: 2,
// 使用 tab 键 default:false
useTabs: false,
// 语句行末是否添加分号 default:true
semi: false,
// 是否使用单引号 default:false
singleQuote: true,
// 对象需要引号在加 default:"as-needed"
quoteProps: 'as-needed',
// jsx单引号 default:false
jsxSingleQuote: true,
// 最后一个对象元素加逗号 default:"es5"
trailingComma: 'es5',
// 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 default:true
bracketSpacing: true,
// 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。default:false
jsxBracketSameLine: false,
// (x) => {} 是否要有小括号 default:"always"
arrowParens: 'always',
// default:0
rangeStart: 0,
// default:Infinity
rangeEnd: Infinity,
// default:false
insertPragma: false,
// default:false
requirePragma: false,
// 不包装 markdown text default:"preserve"
proseWrap: 'never',
// HTML空白敏感性 default:"css"
htmlWhitespaceSensitivity: 'strict',
// 在 *.vue 文件中 Script 和 Style 标签内的代码是否缩进 default:false
vueIndentScriptAndStyle: true,
// 末尾换行符 default:"lf"
endOfLine: 'auto',
// default:"auto"
embeddedLanguageFormatting: 'auto',
overrides: [
{
files: '*.md',
options: {
tabWidth: 2,
},
},
],
}
.prettierignore
# 忽略打包的文件
src/unpackage
# 忽略uni-app官方的组件库错误和警告，官方的竟然通不过...
src/components/uni-**
eslint
eslint 的配置复制于
PanJiaChen大佬的项目，vue-admin-template，关闭了一些实在是太变态的警告。。。（大部分是格式问题）
${app}/.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
// 配置js全局变量，因为是uni-app，全局的uni是不需要引入的，还有5+的plus对象
globals: {
uni: 'readonly',
plus: 'readonly',
wx: 'readonly',
},
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
'no-console': [
'warn',
{
allow: ['warn', 'error'],
},
],
'no-eval': 'error',
'no-alert': 'error',
'vue/max-attributes-per-line': [
0,
{
singleline: 10,
multiline: {
max: 1,
allowFirstLine: false,
},
},
],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'accessor-pairs': 2,
'block-spacing': [2, 'always'],
'brace-style': [