WS 中 vite 的自动格式化代码规范，如丝般顺滑的开发体验！

2023-10-19 17:47:01

前言

在前端开发中，代码规范是至关重要的。它不仅可以提高代码的可读性和可维护性，还可以避免一些常见的错误。在 WebStorm 中使用 vite 构建 vue3 项目时，我们可以使用 ESLint 和 Prettier 来实现自动格式化代码规范，从而使我们的开发体验更加顺畅。

一、安装 ESLint 和 Prettier

首先，我们需要在项目中安装 ESLint 和 Prettier。可以通过以下命令安装：

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

二、配置 ESLint

安装完成后，我们需要在项目中配置 ESLint。可以在项目根目录下创建一个名为 .eslintrc.js 的文件，并添加以下配置：

module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
  },
};

三、配置 Prettier

接下来，我们需要在项目中配置 Prettier。可以在项目根目录下创建一个名为 .prettierrc.js 的文件，并添加以下配置：

module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  bracketSpacing: true,
  arrowParens: 'avoid',
};