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

【Nuxt】Vue最全代码约束之不完全指北(一)_第1张图片

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

前言

为提高团队协作效率,便于开发人员添加功能及后期优化维护,同时输出高质量的文档,
我们必须保证每一个 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

我们可以使用 huskycommitlintlint-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 实现版本管理
【Nuxt】Vue最全代码约束之不完全指北(一)_第2张图片

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提交信息

你可能感兴趣的:(Nuxt,JS,奇淫技巧)