【Nuxt】Vue最全代码约束之不完全指北（一）

代码是写出来给人看的，附带能在机器上运行

前言

为提高团队协作效率，便于开发人员添加功能及后期优化维护，同时输出高质量的文档，
我们必须保证每一个 Vue 组件（等同于模块）专注于解决一个单一的问题，独立的、可复用的、微小的和可测试的，因此通过配置进行代码强约束对于一个项目来说是非常必要的

目录

1. ESlint (插件化的 JavaScript 代码检测工具)
2. commitlint (规范git提交信息)
3. stylelint (css代码审查工具)
4. prettier(统一前端代码风格)
5. cli config(实现交互式的项目脚手架)

ESlint

在 Nuxt.js 中集成 ESLint 是非常简单的，首先我们需要安装 ESLint 的一系列依赖包
官方指南 => 开发工具 ESlint

npm i eslint babel-eslint @nuxtjs/eslint-module @nuxtjs/eslint-config --save-dev
or
yarn add eslint babel-eslint @nuxtjs/eslint-module @nuxtjs/eslint-config --dev

添加依赖项至 nuxt.config.js

/*
 ** Nuxt.js dev-modules
 */
 buildModules: [
   '@nuxtjs/eslint-module'
 ]

如果是旧项目改造的话，可以配置 eqeqeq no-console 等一些频率较高且没办法自动修复的错误，进行过滤

# .eslintrc 
{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "@nuxtjs"
  ],
  "globals": {
    "wx": true
  },
  "rules": {
    "vue/no-v-html": 0,
    "eqeqeq": 0,
    "no-console": 0,
    "vue/max-attributes-per-line": 0,
    "vue/html-closing-bracket-spacing": 0,
    "vue/html-self-closing": 0,
    "vue/singleline-html-element-content-newline": 0
  }
}

通过 .eslintignore 忽略检查目录，Nuxt 工程建议忽略 static 文件夹，剔除一些静态资源的匹配，添加 --fix 参数去修复一些简单错误，配合 VS Code ESLint extension 食用更佳，npm run lint 跑起来就完事了

# package.json
"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .eslintignore ."
 },

commitlint

在多人协作项目中，代码风格统一、代码提交信息的说明等重要性不言而喻，可参考博主的另一篇文章【Git】Git Commit Guidelines => Asn.Li

我们可以使用 husky、commitlint 和 lint-staged 来构建前端工作流

npm i husky lint-staged @commitlint/cli @commitlint/config-angular -D 

lint-staged 针对暂存的 git 文件运行 linters(即此次提交)，commitlint检查提交信息，简单配置的话可以直接写在 package.json 中

# package.json
"husky": {
  "hooks": {
     "pre-commit": "lint-staged",
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
   }
 },
 "lint-staged": {
   "*.{js,vue}": "npm run lint"
 },
 "commitlint": {"extends": ["@commitlint/config-angular"]}

跑起来，有兴趣的同学可以配合 conventional-changelog 实现版本管理

stylelint

利用 ESLint 于 stylelint 这两个工具来帮助我们保持良好的 Coding Style，常见的就是 Bem 规范，可参考博主的另一篇文章【CSS】CSS rules guidelines => Asn.Li

yarn add stylelint @nuxtjs/stylelint-module --dev  
# or npm install stylelint @nuxtjs/stylelint-module --save-dev 

官方指南 => stylelint -opyion

buildModules: [
    // Simple usage
    '@nuxtjs/stylelint-module',
    // With options
    ['@nuxtjs/stylelint-module', { /* module options */ }]
  ]

追加 stylelint 校验

# package.json
"lint-staged": {
  ...
  "*.{vue,css,less}": "stylelint --fix"
},

华丽的分割线，持续更新中…

---

推荐文章

• 我在项目中是这样配置Vue的 => 掘金
• Nuxt项目支持eslint+pritter+typescript => SF
• 用 commitlint 规范团队的git提交信息