eslint+prettier统一前端代码风格、代码规范、开发工具相关配置教程_WEB前端圈

[xiaodongxier]

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 [email protected] -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中写代码，保存时，就会自动格式化代码。