目标：给新建的uniapp项目增加语法规范和保存自动格式化代码，有不对的欢迎指正
2020-11-4日新增
今日看到各种黄色波浪线都来自一个eslint-plugin-vue这个插件，只用eslint + eslint-plugin-vue这两个插件就足够用了，简单明了三步走
1.第一步
npm i eslint eslint-plugin-vue -D
npm i babel-eslint eslint-plugin-node -D // 这两个在配置中可用可不用
2.第二步: 新建.eslintrc.js 文件，极简配置即可。
新建的.eslintrc.js 文件中
module.exports = {
extends: [
'plugin:vue/recommended',
'eslint:recommended'
],
globals: { uni: true, wx: true },
rules: {
"no-mixed-spaces-and-tabs": ["error", "smart-tabs"]
// 还有很多js规则去github上找项目vue-element-admin上搞一份
},
env: {
es6: true,
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
}
}
或者可以直接放在packag.json中都行，参考脚手架生成的vue项目
packag.json 文件中
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
'plugin:vue/recommended',
'eslint:recommended'
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
3.第三步：.vscode文件settings.json用下面的配置即可
{
// "vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉
"editor.formatOnSave": false,
"eslint.enable": true, // eslint 格式化的配置
"eslint.run": "onType",
"editor.tabSize": 2,
"editor.autoClosingQuotes": "always",
"javascript.preferences.quoteStyle": "single",
"workbench.iconTheme": "vscode-icons",
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
"eslint.options": {
"extensions": [".js", ".vue"]
}
}
以下内容选择性浏览
2020-11-1新建
问：为什么是eslint + prettier
答： 这两者都有规范代码的作用，ESLint 主要解决的是代码质量问题，例如使用cost或者let替代var；Prettier 认为格式很重要，比如规定用单引号和或双引号。想要双剑合璧，去掉两者使用中的冲突，使用起来就完美了
问：editorconfig， lint-staged是什么
答：1. 不同的编辑器和系统在编码上一些操作会有不同，比如：缩进是tab还是space，结尾end_of_line是lf还是crlf（editorconfig的能力 —— 用于覆盖编辑器的默认配置）
- lint-staged 用于对 Git 暂存区中的文件执行代码检测，结合husky 用到 pre-commit这个 hook，在执行 commit 之前，可以运行一些自定义操作
1.在插件市场安装要用到的插件，注意：再加个vetur 如下图
企业微信截图_16042994154716.png
2.新建下图中需要用到的文件
[图片上传中...(企业微信截图_16042994154716.png-992558-1604299420862-0)]
editorconfig 大致配置，不建议深究，能用就行
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
# editorconfig-tools is unable to ignore longs strings or urls
max_line_length = null
问： 怎么生成.vscode文件
答：编辑器左下角设置按钮，随便改个设置就会在项目生成该文件夹
3. 下载要用到的包
npm i eslint prettier eslint-plugin-prettier eslint-config-prettier -D
eslint-config-prettier ：关掉 (disable) 所有和 Prettier 冲突的 ESLint 的配置
eslint-plugin-prettier ： 把 Prettier 推荐的格式问题的配置以 ESLint rules 的方式写入，这样相当于可以统一代码问题的来源
问：怎么关掉冲突呢
答：在 .eslintrc.js 里面将 prettier 设为最后一个 extends
// .eslintrc
{
"extends": ["eslint:recommended", "prettier"] // prettier 一定要是最后一个，才能确保覆盖 eslint:recommended 的规则
}
问：怎么导入eslint-plugin-prettier
// .eslintrc
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
以上两者可以简写为
// .eslintrc
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"] // 这个plugin也放在extends数组最后才能覆盖
}
4. vue文件检测并设置保存就自动格式化代码
npm i eslint-plugin-vue eslint-plugin-prettier-vue -D
// .eslintrc
// eslint-plugin-vue现在已经废弃，改为eslint-plugin-vue-libs，有兴趣的朋友可以尝试
{
"extends": ["plugin:vue/essential"]
}
// .vscode文件夹 的setting.json文件
{
"vetur.validation.template": false , // 把 vetur 扩展的 template 格式化去掉
"editor.formatOnSave": false,
// 去掉 vscode 自带的自动保存 ，vscode 默认也是 false的，如果要用 eslint 格式化，默认的格式化就不能开启
//不关闭会和plugin:vue/recommended的规则相冲突
"eslint.enable": true, // eslint 格式化的配置
"eslint.run": "onType",
"editor.tabSize": 2,
"editor.autoClosingQuotes": "always",
"javascript.preferences.quoteStyle": "single",
"workbench.iconTheme": "vscode-icons",
// eslint自动格式化代码详细配置说明：https://www.worldlink.com.cn/en/osdir/vscode-eslint.html
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true,
// For TSLint
"source.fixAll.tslint": true,
// For Stylelint
"source.fixAll.stylelint": true
},
// 以下是旧写法，不必理会
// "eslint.validate": [
// "javascript", // 用eslint的规则检测js文件
// {
// "language": "js",
// "autoFix": true
// },
// {
// "language": "vue",
// "autoFix": true
// }
],
"eslint.options": {
"extensions": [".js", ".vue"]
}
}
5.代码提交前校验
npm i husky lint-staged -D
// package.json文件中增加
"lint-staged": {
"**/**.{js,json,pcss,md,vue}": [
"prettier --write",
"eslint",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
最后：下面是eslintrc.js配置全文，另外有一些插件需要下载，可以根据自己的需要或者eslint报错提示进行安装
npm i babel-eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise "eslint-plugin-html -D
下图可以看到项目中eslint或其他插件运行的情况，有报错根据提示解决即可
企业微信截图_16043040494958.png
至于相关配置可以参考：点我https://my.oschina.net/lsjcoder/blog/1611755
如果项目crl + s保存后还有一些波浪号，没关系。鼠标放上去看提示的什么，点击进入到具体的规则去配置即可，如下图
企业微信截图_16043850131799.png
直接看代码备注了解，选择需要下载的插件下载即可
//eslintrc.js文件内容
/**
* rules
* https://eslint.org/docs/rules/
* https://github.com/benmosher/eslint-plugin-import
*/
module.exports = {
extends: [
'plugin:vue/essential',
// "plugin:vue/essential" 仅包含Base Rules和Priority A:Essential，这里用前两种，少些规则html上仅有:src 和@tap不用换行
// "plugin:vue/recommended" 包含Base Rules、Priority A:Essential、Priority B: Strongly Recommended、Priority C: Recommended
'eslint:recommended',
'plugin:prettier/recommended' // 放在最后面，用prettier的代码规范
],
globals: { uni: true, wx: true }, //全局变量要在这里添加，避免出现提示
plugins: [ 'import'], // eslint-plugin-import需要下载，因为下面rules需要用到该插件所以在这里导入
env: {
es6: true,
browser: true,
node: true // eslint-plugin-node这个插件要安装
},
/**
* "off" 0
* "warn" 1
* "error" 2
*/
rules: {
curly: [2, 'all'], // 必须使用 if(){} 中的{}
'space-before-function-paren': [0],
eqeqeq: [0],
'vars-on-top': [2],
'no-var': [2],
'object-property-newline': [
'error',
{ allowMultiplePropertiesPerLine: true }
], // Map要么多行。要么单行
'object-shorthand': [
'error',
'always',
{
ignoreConstructors: false,
avoidQuotes: true
}
],
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
{
blankLine: 'any',
prev: ['const', 'let', 'var'],
next: ['const', 'let', 'var']
},
{
blankLine: 'always',
prev: ['import', 'cjs-import'],
next: 'expression'
},
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
{ blankLine: 'always', prev: '*', next: 'return' }
],
'prefer-destructuring': [
'warn',
{
VariableDeclarator: {
array: false,
object: true
},
AssignmentExpression: {
array: false,
object: true
}
},
{
enforceForRenamedProperties: false
}
],
'prefer-rest-params': 'error',
'prefer-spread': 'error',
'prefer-template': 'error',
'prefer-arrow-callback': [
'error',
{
allowNamedFunctions: false,
allowUnboundThis: true
}
],
'no-use-before-define': [
'error',
{
classes: true,
functions: false,
variables: true
}
],
'no-unused-expressions': [
'error',
{
allowShortCircuit: true,
allowTernary: true
}
]
},
parserOptions: {
parser: 'babel-eslint', // babel-eslint这个插件要安装
ecmaVersion: 7,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
experimentalObjectRestSpread: true
}
}
}
prettierrc.js文件内容
module.exports = {
/**
* 保留现有的结尾行
*/
endOfLine: 'auto',
/**
* 代码行的长度
*/
printWidth: 80,
/**
* 缩进方式
* true = tab缩进
* false = 空格缩进
*/
useTabs: false,
/**
* 缩进长度
*/
tabWidth: 2,
/**
* 语句是否有";"
*
* true - const a = 1;
* false - const b = 2
*/
semi: false,
/**
* 字符串是否使用单引号包裹
*
* true - 'hello'
* false - "a"
*/
singleQuote: true,
/**
* 数组&&对象&&参数列表 多行显示时,结尾处是否有","
*
* "none" - NO
* "es5" - Array,Object YES
* "all" - Array,Object,Parameter List YES
*/
trailingComma: 'none',
/**
* 字面对象的大括号之间是否使用空格
*
* true - { a: 1 }
* false - {a: 1}
*/
bracketSpacing: true,
/**
* 控制单个参数箭头函数的括号:
* "avoid" - 无括号 x => x
* "always" - 有括号 (x) => x
*/
arrowParens: 'avoid'
}
网友评论