从零构建Vue3+Vite项目：配置ESLint&Prettier

2023-10-11 23:47:43

现在开始我们的Vue3 + Vite之旅，首先需要解决代码风格一致性问题，让我们通过配置ESLint和Prettier来实现代码的规范化。

1. 安装必要的依赖

首先，使用命令行工具安装ESLint和Prettier：

npm install eslint prettier --save-dev

接着，安装ESLint的Vue.js插件和Prettier的Vue.js插件：

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

2. 创建`.eslintrc.js`文件

在项目根目录创建一个名为.eslintrc.js的文件，并添加以下内容：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'import/prefer-default-export': 'off',
    'vue/multi-word-component-names': 'off',
  },
};

3. 创建`.prettierrc.js`文件

在项目根目录创建一个名为.prettierrc.js的文件，并添加以下内容：

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'lf',
};

4. 集成到Vite中

在vite.config.js文件中添加以下内容：

const { defineConfig } = require('vite')
const vue = require('@vitejs/plugin-vue')
const eslintPlugin = require('vite-plugin-eslint')
const prettierPlugin = require('vite-plugin-prettier')

module.exports = defineConfig({
  plugins: [
    vue(),
    eslintPlugin(),
    prettierPlugin(),
  ]
})

5. 启用ESLint和Prettier

在代码编辑器中启用ESLint和Prettier的集成，通常可以通过安装相应的插件来实现。例如，在Visual Studio Code中，可以安装ESLint和Prettier的插件来启用集成。

6. 格式化代码

运行以下命令来格式化代码：

npm run format

这将使用Prettier格式化代码。

7. 开启自动格式化

为了在保存文件时自动格式化代码，可以安装husky和lint-staged，并修改package.json文件中的脚本：

{
  "scripts": {
    "format": "prettier --write \"**/*.{js,vue,ts}\"",
    "lint": "eslint \"**/*.{js,vue,ts}\"",
    "pre-commit": "lint-staged",
  },
  "lint-staged": {
    "*.{js,vue,ts}": ["eslint --fix", "prettier --write"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run pre-commit"
    }
  }
}