统一代码风格：prettier

如果工程是老工程，没有开启eslint，那么只需要在根路径下添加.prettierrc文件,安装prettier插件,添加prettier执行指令就行。

一：安装prettier

npm i prettier -D

二：根目录下创建.prettierrc文件，代码如下：

{
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "trailingComma": "none"
}

三：添加指令

"scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,less,sass}\""
  }

进入工程，执行npm run format就可以整体格式化代码风格。

参考地址：Code Formatting

统一代码规范：eslint

eslint与prettier组合

eslint负责检测代码规范，prettier 负责格式化代码统一风格。

如果是用vue脚手架，默认配置了eslint,就无需在安装eslint相关插件，可能需要升级版本。

安装eslint与perttier相关插件（工程存在eslint也可执行安装下面统一插件）：

npm i eslint babel-eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue prettier prettier-eslint eslint-config-prettier -D

单独安装eslint-loader（eslint-loader版本必须在3.0.0以上）:

npm i eslint-loader -D

如果不升级，一般会出现错误：Module build failed: Error: Cannot find module 'eslint/lib/formatters/stylish'

单独安装eslint-plugin-prettier（eslint-plugin-prettier版本号建议 < 4）

npm i eslint-plugin-prettier@3.1.4 -D

prettier相关插件说明：

• eslint-plugin-prettier：为了eslint跟prettier可以联合使用
• eslint-config-prettier：eslint跟prettier兼容，关闭prettier跟eslint 冲突的rules

创建.prettierrc文件

根目录下创建.prettierrc文件，代码如下：

{
  "printWidth": 1000,
  "tabWidth": 2,
  "semi": true,
  "endOfLine": "auto",
  "trailingComma": "none"
}

调整.eslintrc.js配置

示例代码：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["vue", "prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
        trailingComma: "none"
      }
    ]
  }
};

核心代码：

 plugins: ["prettier"],
 extends: ["prettier"],
 rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
        trailingComma: "none"
      }
    ]
  }

说明：

• eslint:all:表示引入当前版本eslint的所有核心规则。
• eslint:recommended:表示引入eslint的核心功能，并且报告一些常见的共同错误。

添加指令、执行指令

在package.json中添加如下指令：

"scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,less,sass}\"",
    "lint2": "eslint --fix \"src/**/*.{js,vue,less,sass}\""
  }

进入工程，执行npm run format可以格式化代码风格。执行npm run lint2检查前端语法，只能修复部分问题，不能修复的需要手动修改。

统一开发工具：vscode（推荐）

统一安装插件：eslint、Prettier - Code formatter

{
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

注意，重点配置保存文件自动格式化：

{
  "editor.formatOnSave": true
}