Vue3+Typescript+ESLint+Prettier 创建项目——让代码更规范、更优雅

2023-11-23 16:32:13

引言

在现代前端开发中，代码规范和格式化已经成为一种必不可少的实践。通过使用代码规范工具，我们可以确保代码风格的一致性，提高代码的可读性和可维护性，同时减少代码错误的发生。ESLint 和 Prettier 就是两款非常流行的代码规范和格式化工具，它们可以帮助我们轻松实现这些目标。

ESLint 简介

ESLint 是一款强大的 JavaScript 代码检查工具，它可以帮助我们发现代码中的错误、潜在的问题和编码风格的不一致。ESLint 提供了大量内置规则，涵盖了各种编码规范和最佳实践。我们可以根据自己的项目需求，选择合适的规则来检查代码。

Prettier 简介

Prettier 是一款代码格式化工具，它可以自动将代码格式化为一致的风格。Prettier 支持多种编程语言，包括 JavaScript、TypeScript、CSS、HTML 等。Prettier 采用了一种基于规则的格式化算法，可以根据不同的代码风格规则自动调整代码的格式。

在 Vue3 + Typescript 项目中集成 ESLint 和 Prettier

1. 安装 ESLint 和 Prettier

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

npm install eslint --save-dev
npm install prettier --save-dev

2. 配置 ESLint

接下来，我们需要配置 ESLint。我们可以创建一个名为 .eslintrc.js 的配置文件，并写入以下内容：

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

3. 配置 Prettier

接下来，我们需要配置 Prettier。我们可以创建一个名为 .prettierrc.js 的配置文件，并写入以下内容：

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

4. 集成 ESLint 和 Prettier

最后，我们需要将 ESLint 和 Prettier 集成到我们的项目中。我们可以使用以下命令来实现：

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

然后，我们在 .eslintrc.js 文件中添加以下内容：

plugins: [
  // ...
  'prettier',
],
rules: {
  // ...
  'prettier/prettier': 'error',
},

5. 使用 ESLint 和 Prettier

现在，我们就可以在项目中使用 ESLint 和 Prettier 了。我们可以通过以下命令来运行 ESLint：

npx eslint .

我们可以通过以下命令来运行 Prettier：

npx prettier .

6. 保存时自动格式化代码

为了在保存时自动格式化代码，我们可以使用以下插件：

npm install --save-dev eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-unused-imports

然后，我们在 .eslintrc.js 文件中添加以下内容：

plugins: [
  // ...
  'import',
  'unused-imports',
],
rules: {
  // ...
  'import/order': ['error', { 'newlines-between': 'always' }],
  'unused-imports/no-unused-imports': 'error',
},