vue项目使用eslint和prettier规范代码

vue项目使用eslint和prettier规范代码

1.安装eslint

//本地
yarn add -D eslint
npm install eslint --save-dev

//全局
yarn global add eslint
npm install -g eslint

2.运行eslint --init，选择工程使用了vue，自动生成.eslintrc.js文件

eslint --init

3.安装prettier

//本地
yarn add prettier --dev --exact
npm i -D --save-exact prettier

// 全局安装
yarn global add prettier
npm i --global prettier

4.安装eslint-config-prettier插件（禁用 eslint 风格校验）

yarn add -D eslint-config-prettier
npm i -D eslint-config-prettier

5.安装eslint-plugin-prettier插件（使eslint采用prettier的风格校验）

yarn add -D eslint-plugin-prettier
npm i -D eslint-plugin-prettier

6.配置eslintrc.js文件（设置"plugin:prettier/recommended"）完整配置点击查看

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  /**
   * 规则继承
   * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
   *【】可继承的方式有以下几种
   *【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
   *【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
   *  可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
   *【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀
   * 如'plugin:vue/essential'
   *【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
   */
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended"
  ],
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 12,
    sourceType: "module"
  },
  plugins: ["vue"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/html-closing-bracket-spacing": "off",
    "vue/html-self-closing": "off",
    "vue/html-indent": "off",
    "vue/require-default-prop": "off",
    "vue/require-prop-types": "off",
    "vue/max-attributes-per-line": "off",
    "vue/no-template-shadow": "off"
  }
};

7.prettier 配置（非必须），根目录创建 .prettierrc 或 prettier.config.js 文件，并对外export一个对象

module.exports = {
  endOfLine: 'auto', // 不检测检测文件每行结束的格式
  semi: false, // 使用分号, 默认true
  singleQuote: true // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
}

8.安装vscode插件：Prettier ESLint。

该插件会根据工程根目录下的eslintrc.js和prettier.config.js文件格式化代码。可以进一步设置为vscode默认formater和自动格式化。

9.未完待续

使用husky6插件来配合eslint，prettier规范git提交