vue基础ESLint Prettier配置教程详解

以下是“vue基础ESLint Prettier配置教程详解”的完整攻略。

什么是ESLint和Prettier

ESLint是一个开源的JavaScript Lint工具，用于识别和报告代码中的模式。它支持ES6语法和JSX语法，并插件化。对于样式一致性和错误检查等非常有用。它可以直接集成到IDE中，可以在保存时自动进行formatting和代码规范的检查和修复。

Prettier是一个代码格式化的工具，可以自动调整代码的样式，比如空格、换行、引号等等。它是高度可配置的，可以与ESLint很好地协作，比如对于一些风格问题，可以通过ESLint进行检查并通过Prettier自动完成修复。

配置过程和步骤

第一步：安装依赖

首先，我们需要安装相关依赖。

npm install eslint eslint-plugin-vue  prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged --save-dev

• eslint - ESLint核心库
• eslint-plugin-vue - vue的eslint插件
• prettier - 代码格式化工具
• eslint-config-prettier - 将Prettier输出的格式化规则禁用ESLint中与之冲突的部分
• eslint-plugin-prettier - 对Prettier的配置进行包装，在ESLint中作为规则使用
• husky - 类似于git hooks的工具，用于在代码提交前进行相关的检查和操作
• lint-staged - 可以让我们只在提交代码发现改变的文件进行代码检查

第二步：创建.eslintrc.js文件

在项目的根目录下创建.eslintrc.js文件，并在其中配置ESLint的规则和插件以及与Prettier的协同工作关系。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier',
    '@vue/typescript',
    'prettier',
    'prettier/vue',
  ],
  plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 2020,
    parser: '@typescript-eslint/parser',
  },
  rules: {
    'prettier/prettier': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

• root - 必须设置为“true”，表示该文件为config文件，停止在父文件夹中寻找
• env - 环境设置
• extends - 扩展配置，包含的是eslint-config-prettier和plugin:vue/prettier等
• parser - 代码解析器
• parserOptions - 附加规则
• plugins - ESLint插件
• rules - 要执行的规则

第三步：创建 .prettierrc.js 文件

module.exports = {
  singleQuote: true,
  semi: true,
  trailingComma: 'all',
  printWidth: 80,
};

以上的代码表示，我们启用了单引号、分号和所有尾随逗号。

第四步：添加husky和pre-commit配置

我们可以在package.json文件中添加以下内容

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
  }

这段代码表示在即将提交代码之前，执行lint-staged命令，检查所遇到的所有js,vue,ts文件，如果存在ESLint或Prettier规则，就更新它们的样式。

示例1：在VS Code中使用 ESLint 和 Prettier

在VS Code中，我们还可以使用基于插件的方式使得我们不用在终端输入很多命令。首先，我们需要安装以下两个VS Code插件：

• ESLint：搜索ESLint插件并安装到VS Code。
• Prettier：搜索Prettier插件并安装到VS Code。

接下来，我们需要配置VS Code，打开 settings.json 文件，加入以下代码：

  "editor.formatOnSave": true, // 每次文件保存时，格式化文件
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ],
  "prettier.eslintIntegration": true, // 让Prettier使用ESLint的代码样式规则进行格式化
  "vetur.format.defaultFormatter": {
    "html": "js-beautify-html",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }

示例2：在vue-cli项目中配置ESLint和Prettier

在vue-cli项目中，我们只需要进行如下配置即可：

在package.json文件中加入以下代码：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint:fix": "eslint --fix --ext .js,.vue src"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "singleQuote": true,
    "semi": true,
    "trailingComma": "es5"
  }
}

然后，在控制台中执行命令：

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

这一步将安装Prettier插件和与ESLint一起运行的包装器。

最后，我们在index.js或者其他主文件的<script>中加入以下注释：

/* eslint-disable */
// Some code.
/* eslint-enable */

这告诉ESLint忽略此段代码。

以上就是vue基础ESLint Prettier配置教程的完整攻略。