看了大佬的一系列操作,自己做个笔记总结。
原文:https://www.jianshu.com/p/5ab7b4b48964
一些链接:ESLint、Prettier 、husky 、lint-staged、腾讯 AlloyTeam 团队出品的 eslint-config-alloy 开源规范库 中文文档和网站示例
编辑器
Visual Studio Code
需要的vscode插件
ESLint:自动检测 ESLint Rule,不符合规则时,在编辑页面会有警告 ️
Prettier - Code formatter:可用于格式化
vscode设置
路径是:your_project/.vscode/settings.json
{
"files.associations": {
"*.wxss": "css",
"*.wxs": "javascript",
"*.acss": "css",
"*.axml": "html",
"*.wxml": "html",
"*.swan": "html"
},
"files.trimTrailingWhitespace": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.enable": true, // 是否开启 vscode 的 eslint
"eslint.options": {
// 指定 vscode 的 eslint 所处理的文件的后缀
"extensions": [".js", ".ts", ".tsx"]
},
"eslint.validate": ["javascript"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"git.ignoreLimitWarning": true
}
安装依赖 或者 复制package内容install
yarn init
yarn add --dev babel-eslint@10.0.3
yarn add --dev eslint@6.7.1
yarn add --dev eslint-config-alloy@3.7.1
yarn add --dev eslint-config-prettier@6.10.0
yarn add --dev eslint-plugin-prettier@3.1.4
yarn add --dev prettier@2.0.5
yarn add --dev prettier-eslint-cli@5.0.0
yarn add --dev npm-run-all@4.1.5
yarn add --dev husky@4.3.0
yarn add --dev lint-staged@10.3.0
package.json内容
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"eslint": "eslint . --ext .js,.wxs,.sjs",
"eslint:fix": "eslint --fix . --ext .js,.wxs,.sjs",
"prettier:fix": "prettier --config .prettierrc.js --write './**/*.{js,sjs,wxs,css,wxss,acss,wxml,axml,less,scss,json}'",
"format:all": "npm-run-all -s prettier:fix eslint:fix"
},
"devDependencies": {
"babel-eslint": "10.0.3",
"eslint": "6.7.1",
"eslint-config-alloy": "3.7.1",
"eslint-config-prettier": "6.10.0",
"eslint-plugin-prettier": "3.1.4",
"husky": "4.3.0",
"lint-staged": "10.3.0",
"npm-run-all": "4.1.5",
"prettier": "2.0.5",
"prettier-eslint-cli": "5.0.0"
},
//下面两个在提交代码前的格式校验
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,wxs,sjs}": [
"prettier --config .prettierrc.js --write",
"eslint --fix --ext .js"
],
"*.{json,wxml,axml,css,wxss,acss,wxml,axml,less,scss}": "prettier --config .prettierrc.js --write"
}
格式配置文件 .eslintrc.js 和 .prettierrc.js
放置在项目根目录下。
// .eslintrc.js
module.exports = {
root: true,
parser: 'babel-eslint',
env: {
browser: true,
es6: true,
node: true,
commonjs: true
},
extends: ['alloy'],
plugins: ['prettier'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
__DEV__: true,
__WECHAT__: true,
__ALIPAY__: true,
App: true,
Page: true,
Component: true,
Behavior: true,
wx: true,
my: true,
swan: true,
getApp: true,
getCurrentPages: true
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module'
},
rules: {
'no-debugger': 2,
'no-unused-vars': 1,
'no-var': 0,
'no-param-reassign': 0,
'no-irregular-whitespace': 0,
'no-useless-catch': 1,
'max-params': ['error', 3],
'array-callback-return': 1,
eqeqeq: 0,
indent: ['error', 2, { SwitchCase: 1 }]
}
}
// .prettierrc.js
module.exports = {
printWidth: 120,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// jsx 不使用单引号,而使用双引号
jsxSingleQuote: false,
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: false,
// 箭头函数,只有一个参数的时候,无需括号
arrowParens: 'avoid',
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf',
// Prettier 支持对某些文件扩展名,文件夹和特定文件进行不同的配置
overrides: [
{
files: ['*.wxss', '*.acss'],
options: {
parser: 'css'
}
},
{
files: ['*.wxml', '*.axml'],
options: {
parser: 'html'
}
},
{
files: ['*.wxs', '*.sjs'],
options: {
parser: 'babel'
}
}
]
}
配置忽略文件 .eslintignore 和 .prettierignore
放置在项目根目录下。
# .eslintignore
*.min.js
typings
node_modules
# .prettierignore
*.min.js
/node_modules
/dist
# OS
.DS_Store
.idea
.editorconfig
.npmrc
package-lock.json
# Ignored suffix
*.log
*.md
*.svg
*.png
*ignore
## Built-files
.cache
dist
.editorconfig
配置文件
放置在项目根目录下。它是用来抹平不同编辑器之间的差异的。
# .editorconfig
# http://editorconfig.org
# https://github.com/editorconfig/editorconfig/wiki/EditorConfig-Properties
# 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找
root = true
# 匹配所有的文件
[*]
# 缩进风格:space
indent_style = space
# 缩进大小 2
indent_size = 2
# 换行符 lf
end_of_line = lf
# 字符集 utf-8
charset = utf-8
# 不保留行末的空格
trim_trailing_whitespace = true
# 文件末尾添加一个空行
insert_final_newline = true
# 运算符两遍都有空格
spaces_around_operators = true
# 对所有的 js 文件生效
[*.js]
# 字符串使用单引号
quote_type = single
[*.md]
trim_trailing_whitespace = false
最后是 微信小程序的打包配置
// project.config.json 仅微信小程序
"packOptions": {
"ignore": [
{
"type": "regexp",
"value": "\\.md$"
},
{
"type": "folder",
"value": "node_modules"
}
]
}