最近在搭建项目框架, 想着上一个项目代码风格各异, 就想着在新项目中引入 Eslint 来规范团队成员代码风格, 保持统一, 也方便大家维护代码, 减少不必要的错误. 前端应用愈加复杂, 代码规范问题必须通过强制的方式保持统一. 以下是团队逐渐摸索出的一些配置, 各取所需.
Eslint 配置
在用 vue-cli3 搭建项目的过程中就会问你是否需要 Eslint, 选择就好来. 如果没有选择后期又想加入 eslint, 可以手动安装 Eslint 的相关依赖.
安装
NPM install eslint eslint-plugin-vue --save-dev
需要注意: Node.JS (>=6.14), NPM version 3+.
创建 Eslint 配置文件
在项目根目录下新建一个文件, 名. eslintrc.JS. 下面是个人的一些配置, 可以自行参考.
- module.exports = {
- root: true,
- env: {
- browser: true,
- node: true,
- es6: true
- },
- extends: ["eslint:recommended", "plugin:vue/essential", "@vue/prettier"],
- rules: {
- "generator-star-spacing": "off",
- "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
- "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
- "vue/no-parsing-error": [
- 2,
- {
- "unexpected-solidus-in-tag": false
- }
- ]
- },
- parserOptions: {
- parser: "babel-eslint",
- ecmaVersion: 7,
- sourceType: "module",
- ecmaFeatures: {
- // 添加 ES 特性支持, 使之能够识别 ES6 语法
- jsx: true
- }
- }
- };
忽略 Eslint 校验
如果一些文件不需要 Eslint 的校验, 可以配置一个. eslintignore, 里面写上需要排除的文件.
- /build/
- /config/
- /dist/
- /*.JS
- /test/unit/coverage/
stylelint 配置
stylelint 可以帮助我们规范化 CSS 的书写, 风格统一, 减少错误.
安装依赖
NPM i -D stylelint stylelint-config-standard stylelint-webpack-plugin
配置
在项目根目录下新建配置文件. stylelintrc.JS, 相关配置如下:
- module.exports = {
- extends: "stylelint-config-standard",
- rules: {
- "color-no-invalid-hex": true,
- "rule-empty-line-before": null,
- "color-hex-length": "long",
- "color-hex-case": "lower",
- "unit-whitelist": ["em", "rem", "%", "s", "px"],
- "declaration-colon-newline-after": null
- }
- };
代码美化 prettier 配置
虽然借助 Eslint 来提高代码质量, 但是却无法保证代码风格统一. 一个统一的代码风格对于团队来说是很有价值的, 所以为了达到目的, 我们使用了 Prettier 在保存和提交代码的时候, 将代码修改成统一的风格.
安装依赖
NPM i -D prettier @vue/eslint-config-prettier
配置
相关配置写在. eslintrc.JS 中
extends: ["eslint:recommended", "plugin:vue/essential", "@vue/prettier"]
我使用的是 vscode 编辑器, 同时配置了 vscode.
- {
- "eslint.autoFixOnSave": true,
- "eslint.validate": [
- "javascript",
- {
- "language": "vue",
- "autoFix": true
- },
- "html",
- "vue"
- ],
- "editor.wordWrap": "wordWrapColumn",
- "editor.formatOnSave": true,
- "vetur.validation.template": false,
- "cSpell.ignoreWords": [
- "menu",
- "mixins"
- ]
- }
推荐使用 vscode 的同学安装 eslint 和 Prettier - Code formatter 这两个插件, 配合上面的配置, 达到保存的时候自动格式化和校验的目的.
提交时校验
安装两个工具
husky: 一个方便用来处理 pre-commit , pre-push 等 githooks 的工具
lint-staged: 对 Git 暂存区的代码, 运行 linters 的工具
NPM i lint-staged husky -D
package.JSON 增加配置
- ...
- "husky": {
- "hooks": {
- "pre-commit": "lint-staged"
- }
- },
- "lint-staged": {
- "src/**/*.{js,jsx,vue}": [
- "prettier --tab-width 2 --write",
- "vue-cli-service lint --fix",
- "git add"
- ]
- }
- ...
这样就可以实现在提交的时候校验, 保证错误的代码无法提交.
到目前为止, 项目中就整合进了 Eslint 校验, prettier 美化代码, 提交 hooks 代码检查.
参考
- Eslint https://cn.eslint.org/
- https://stylelint.io/
stylelint 指南
来源: http://www.tuicool.com/articles/QVbYnim