前端代码格式化--Nuxt/Vue配置规范目的随着前端项目的日益复杂，叠加项目人员越来越多、人员变动等因素，代码风格日

规范目的

随着前端项目的日益复杂，叠加项目人员越来越多、人员变动等因素，代码风格日趋多样化和随意化（比如单双引号问题，是否加分号问题，'=='的使用问题等），为程序的健壮性和可维护性埋下雷。所以项目编码规范统一势在必行，而团队成员的自觉性往往是靠不住的，代码提交时自动格式化处理即可靠又省时省力。

实现功能

格式化规则默认使用prettier，同时支持自定义规则
git commit代码时自动运行格式化代码
vscode基于prettier/eslint的语法错误提示
vscode 本地保存自动格式化代码（可选）

用到的库

eslint：javascript代码检查工具，使用.eslintrc文件进行配置
prettier：代码格式化工具，通过尽量少的配置提供通用的格式化样式，配置文件.prettierrc.json及忽略文件.prettierignore(项目内安装需锁定版本，否则多人协作可能出现版本不一致导致规则不一致的问题)
eslint-plugin-vue：为eslint提供vue语法支持，比如<template>标签的识别等
eslint-config-prettier：解决eslint和prettier规则冲突问题，屏蔽冲突的eslint规则
eslint-plugin-prettier：将prettier规则适配到eslint上，编辑器可以依据prettier规则产生警告
husky：配置化的方式使用git的hooks，主要是pre-commit和commit-msg等
lint-staged：提供在git的暂存文件中进行lint的能力，有效减少提交时检查代码的数量

提交格式化

首次安装

yarn add eslint babel-eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier lint-staged -D
prettier锁定安装：yarn add prettier -D -E
husky：npx husky-init && yarn (# Yarn 1)
编辑.husky/pre-commit 将npm test替换为npx lint-staged
项目根目录下创建.prettierignore和.prettierrc.json文件，内容参考文档

编辑.eslintrc.js文件，修改为如下配置（基本配置）：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 7, // latest
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: [
    'vue'
  ],
  rules: {},
}

修改package.json文件，添加：

{
  ...
  "lint-staged": {
    "**/*.{js,vue}": [
      "prettier --write --ignore-unknown",
      "eslint --fix"
    ]
  }
}

执行git commit，如果报错：npx: command not found，执行echo $PATH打印环境变量，修改pre-commit文件中npx命令前添加环境变量PATH=$PATH:Your path例如：PATH=$PATH:/usr/local/bin:/usr/local/sbin
修改vue/js代码文件，提交测试格式化，查看修改记录是否生效

克隆安装

clone代码到本地，从production分支创建开发分支
```
$ yarn   # or npm i
```
执行git commit，如果报错：npx: command not found，执行echo $PATH打印环境变量，修改pre-commit文件中环境变量PATH=$PATH:Your path例如：PATH=$PATH:/usr/local/bin:/usr/local/sbin
修改vue/js代码文件，提交测试格式化，查看修改记录是否生效

禁用格式化

修改pre-commit文件，注释掉：# npx lint-staged

本地格式化（可选）

Vscode配置格式化插件

版本： Version: 1.58.2 (Universal)
安装插件：Prettier - Code formatter 和 ESLint

Vscode配置文件settings.json中添加/修改相关格式化配置：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 保存代码的时候格式化,注释掉可取消自动格式化功能
  "editor.formatOnSave": true,
  // 启用保存时自动修复,注释掉可取消自动格式化功能
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}