Prettier 与 Linter

eslint+prettier配合使用对于追求代码洁癖，统一前端风格简直就是一劳永逸，能大幅度提升敲代码的幸福感

一、老工程使用prettier依赖包

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

这样可以批量格式化代码，也可以结合vscode配置格式化插件，具体配置见最后

1、安装prettier

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

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

3、在package.json中添加指令

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

4、进入项目根目录后，执行npm run format指令就可以整体格式化代码风格。

二、新项目：eslint与prettier组合

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

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

1、安装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以上）:

如果不升级，一般会出现错误：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

2、创建.prettierrc文件

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

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

3、调整.eslintrc.js配置

示例代码：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["vue", "prettier"],
  extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "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的核心功能，并且报告一些常见的共同错误。

4、添加指令、执行指令

在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（推荐）

统一安装vscode扩展：eslint、Prettier - Code formatter。

eslint+prettier

安装后，打开设置，切换到setting.json进行配置。

{
"editor.formatOnSave": true,
//"eslint.autoFixOnSave": true, //这个已经废弃，改用下面的
"editor.codeActionsOnSave": {
      "source.fixAll.eslint": 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
}

至此，当你在vscode中写代码，保存时，就会自动格式化代码。

其他参考

Linter 有两类规则：

格式规则：例如：max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style…

¥Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…

Prettier 减轻了对这一整类规则的需求！Prettier 将以一致的方式从头开始重新打印整个程序，因此程序员不可能再犯错误了:)

¥Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it’s not possible for the programmer to make a mistake there anymore :)

代码质量规则：例如 no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors……

¥Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…

Prettier 对这些规则没有任何帮助。它们也是 linters 提供的最重要的东西，因为它们很可能会捕获你代码中的真正错误！

¥Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

换句话说，使用 Prettier 进行格式化，使用 linter 捕获错误！