vue-cli3 使用 ESLint 及 Prettier 规范代码-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，规范代码是非常重要的一环，它有助于提高团队的开发效率和代码的可维护性。在使用 Vue-cli3 构建项目时，我们可以引入 ESLint 及 Prettier 工具，以帮助我们更好地规范代码。

ESLint 介绍

ESLint 是一款插件化的 JavaScript 语法规则检查工具，用于统一代码风格，增强代码可读性和可维护性。
ESLint 可以识别 ECMAScript 6 语法，而且可以自定义规则。
它可以集成到编辑器中，也可以通过命令行来使用。
ESLint 的使用需要配置文件，常见的配置文件有 .eslintrc 和 package.json。

Prettier 介绍

Prettier 是一款代码格式化工具，能够通过执行格式化命令，将代码格式化成符合规范的格式，从而省去了代码的手动排版时间。
Prettier 可以识别多种语言，并支持自定义配置。
它可以与 ESLint 集成，在使用 ESLint 的时候自动执行格式化操作。
Prettier 的使用需要配置文件，常见的配置文件为 .prettierrc 和 package.json。

Vue-cli3 中使用 ESLint 和 Prettier

在 Vue-cli3 生成的项目中，默认已经安装了eslint-plugin-vue 插件，可以直接在 .eslintrc.js 配置文件中启用 Vue 插件。

Step1：安装依赖

执行以下命令安装 ESLint、Prettier 及其相关依赖：

npm install eslint-plugin-vue eslint eslint-config-prettier prettier eslint-plugin-prettier --save-dev

Step2：配置 ESLint 及其插件

在 .eslintrc.js 配置文件中添加以下内容：

module.exports = {
  'root': true,
  'env': {
    'node': true,
    'browser': true,
    'es6': true
  },
  'extends': [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier'
  ],
  'parserOptions': {
    'parser': 'babel-eslint',
    'ecmaVersion': 6,
    'sourceType': 'module'
  },
  'rules': {
    'vue/max-attributes-per-line': 'off',
    'vue/require-default-prop': 'off',
    'vue/html-self-closing': 'off',
    'semi': ['error', 'always'],
    'no-console': 'off',
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true
      }
    ]
  },
  'plugins': [
    'vue',
    'prettier'
  ]
}

例如，上述配置文件：

设置根目录为 true
设置支持的环境：node、browser、es6
继承 eslint 推荐规则，eslint-plugin-vue 推荐规则及 Prettier
设置 parserOptions，包含 parser 的来源和语法版本等信息，以便在语法检查中使用
关闭 lint 校验的规则，如 vue-template 特有规则，和一些 ESLint 推荐规则。
启用 Prettier 添加的规则

Step3：配置 Prettier

在根目录下创建一个 .prettierrc.js 文件，用于配置 Prettier 的规则，例如：

module.exports = {
  semi: false,
  singleQuote: true
};

Step4：集成 ESLint 及 Prettier 到项目中

将 ESLint 及其相关插件添加到 package.json 文件中：

{
  "eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    }
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint": "^7.22.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.8.0",
    "prettier": "^2.2.1",
    "vue": "^3.0.0",
    "vue-loader": "^16.0.0",
    "vue-template-compiler": "^2.6.12"
  }
}

Step5：在命令行中使用 ESLint 及 Prettier

为了使 ESLint 与 Prettier 集成，为它们相应的添加了 plugin 依赖。可以通过以下配置在终端执行：

/* package.json */
{
  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src",
    "pretty": "prettier --write \"src/**/*.{js,jsx,vue,html,css,less,scss,json,md}\""
  }
}

执行 npm run lint 将会对项目中包含的 .js 和 .vue 文件执行 eslint 校验，并尝试自动修复错误。

执行 npm run pretty 将会对项目中包含的 .js 和 .vue 文件格式化。

总结

ESLint 和 Prettier 是两个非常有用的工具，能够帮我们更好地规范代码，提高项目的可维护性和开发效率。通过在 Vue-cli3 中使用 ESLint 和 Prettier，我们能够有效地规范代码格式，提升代码质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659e2b26add4f0e0ff73b4c9

vue-cli3 使用 ESLint 及 Prettier 规范代码