看了大佬的一系列操作,自己做个笔记总结。
原文: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" } ] }