自学内容网 自学内容网
自学内容网 > 正文

Vue3 + Vite + TS 项目引入 Eslint + Pritter

🕗 发布于 2024-11-20 07:09 eslint  prittier  

文章目录

一、ESLint 简介

ESLint 是一款 JavaScript 和相关语言（如 TypeScript、Vue 等）的静态代码分析工具，主要用于发现代码中的问题，并帮助开发者遵循代码规范。

主要功能

  • 语法检查：识别语法错误（如漏掉的括号、未定义的变量等）。
  • 代码质量检测：帮助发现潜在的逻辑问题（如未处理的 Promise）。
  • 规范代码风格：支持团队定义统一的代码风格（如是否使用分号、缩进方式等）。
  • 可扩展性强：支持多种插件（如 eslint-plugin-vue、eslint-plugin-react 等）和规则自定义。

适用场景

  • 项目开发：保障团队代码风格一致，减少错误。
  • 代码审查：辅助检测潜在问题，提升代码质量。

常用的 Eslint 配置项

二、Pritter 简介

Prettier 是一款专注于代码格式化的工具，它以无争议的方式对代码进行排版处理，确保代码风格的一致性。Prettier 不关注语法问题，而是专注于代码的外观。

主要功能

  • 格式化代码：自动调整代码的缩进、换行、空格等，使代码美观一致。
  • 支持多语言：不仅支持 JavaScript，还支持 HTML、CSS、JSON 等多种语言。
  • 集成方便：可以与编辑器（如 VS Code）、ESLint 等工具无缝结合。

适用场景

  • 团队合作：确保团队代码格式一致。
  • 提高效率：避免开发者因代码样式问题耗费时间。

常用的 Prettier 配置项

配置项描述默认值
semi是否在语句末尾添加分号。true
singleQuote使用单引号还是双引号。false
tabWidth每个缩进级别的空格数。2
trailingComma多行末尾是否添加逗号：none、es5（支持的语法）、all（所有地方）es5
printWidth每行代码的最大字符数，超过时会自动换行。80
bracketSpacing对象字面量中的括号之间是否加空格。true
jsxBracketSameLineJSX 中 > 是否与最后一行的属性放在同一行。false
arrowParens箭头函数参数周围是否总是加上圆括号。always（总是加括号），avoid（只有有多个参数时才加括号）always
proseWrap处理 Markdown 文本时是否换行。preserve
htmlWhitespaceSensitivity是否对 HTML 的空白符敏感。css（CSS 控制）、strict（严格敏感）、ignore（忽略空格）css
endOfLine设置行尾字符，支持：lf、crlf、cr、auto。auto
quoteProps对对象属性名使用引号的规则，支持：as-needed、consistent、preserveas-needed
overrides针对特定文件的配置覆盖。[]

三、Vue3 + Vite + TS 项目引入 Eslint + Pritter

1. 安装 ESLint

使用以下命令安装 ESLint 及其相关依赖：

npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  • eslint：核心 ESLint 工具。
  • eslint-plugin-vue：针对 Vue 文件的 ESLint 插件。
  • @typescript-eslint/parser：支持 TypeScript 的解析器。
  • @typescript-eslint/eslint-plugin：提供 TypeScript 相关规则。

2. 初始化 ESLint 配置

// .eslintrc.cjs
module.exports = {
  root: true, // 表示该配置是根配置
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended", // ESLint 推荐规则
    "plugin:vue/vue3-recommended", // Vue3 推荐规则
    "plugin:@typescript-eslint/recommended", // TypeScript 推荐规则
    "standard",
  ],
  parser: "vue-eslint-parser", // Vue 文件解析器
  parserOptions: {
    parser: "@typescript-eslint/parser", // TypeScript 解析器
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    // 可根据需要调整规则
    'simple-import-sort/imports': 'error', // 自动排序 JavaScript 或 TypeScript 文件中的导入语句
    'simple-import-sort/exports': 'error', // 自动排序 JavaScript 或 TypeScript 文件中的导出语句
    'vue/multi-word-component-names': 0, // 避免使用单个词作为 Vue 组件的名称
    '@typescript-eslint/no-explicit-any': 0, // 防止在 TypeScript 代码中使用 any 类型
    'space-before-function-paren': 0, // 控制函数定义或函数表达式括号前的空格
    'no-use-before-define': 0, // 禁止在变量、函数或类定义之前使用它们
    'import/no-absolute-path': 0, // 禁止使用绝对路径导入模块
    '@typescript-eslint/no-non-null-assertion': 0, // 禁止在代码中使用 非空断言操作符（!）
    camelcase: 0, // 使用驼峰命名参数
    '@typescript-eslint/no-unused-vars': 'warn', // 检查并报告那些在代码中声明但未被使用的变量、函数参数、导入等
    'func-call-spacing': 0, // 控制在函数调用时，函数名称与括号之间是否应该有空格
    '@typescript-eslint/no-this-alias': [
      'error',
      {
        allowDestructuring: false,
        allowedNames: ['self']
      }
    ], // 禁止在 TypeScript 中使用 this 的别名
    // 禁用重复声明检测, ts 会强制执行这个规则
    // 如果不禁用这个规则, 会导致 ts 函数重载的时候报错
    'no-redeclare': 0
  },
};

3. 在 Vite 项目中启用 ESLint

安装 vite-plugin-eslint，将 ESLint 集成到 Vite 的开发流程中：

npm install vite-plugin-eslint --save-dev

修改 vite.config.ts 文件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import eslint from "vite-plugin-eslint";

export default defineConfig({
  plugins: [
    vue(),
    eslint({
      exclude: ['**/node_modules/**'] // 排除所有 node_modules 文件夹之外的文件都进行 eslint 检查
    }),
  ],
});

4. 在 VS Code 中启用 ESLint

  1. 安装 ESLint 插件：

    在 VS Code 的扩展市场搜索并安装 ESLint 插件。

5. 集成 Prettier

  1. 安装 Prettier 及其 ESLint 插件：
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
  1. 在 .eslintrc.js 文件中添加 Prettier：
extends: [
"prettier" // 关闭 ESLint 中与 Prettier 冲突的规则
],
plugins: [
"prettier" // 将 Prettier 的格式化规则作为 ESLint 的规则使用
],
  1. 配置 .prettierrc 文件：
{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "arrowParens": "avoid",
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true,
  "rangeStart": 0,
  "htmlWhitespaceSensitivity": "css",
  "proseWrap": "preserve"
}

6. 在 VS Code 中启用 Prettier 自动修复

  1. 打开 VS Code 设置（Ctrl + , 或 ⌘ + ,），搜索 Format On Save，并启用。
  2. 或在 .vscode/settings.json 中添加：
{
  "editor.formatOnSave": true,
}
  1. 保存文件后会以 .prettierrc 文件中设置的规则对代码就行格式修正

7. 可选优化：集成 eslint-plugin-simple-import-sort

协同开发时为了避免 import 顺序不一致导致的冲突，需要对 import 文件引入顺序进行默认排序，通过 simple-import-sort 可以实现报错和修复。

  1. 安装 eslint-plugin-simple-import-sort 插件：
npm install eslint-plugin-simple-import-sort --save-dev
  1. 在 .eslintrc.js 文件中添加 eslint-plugin-simple-import-sort：
plugins: [
"simple-import-sort"
],

rules: {
   'simple-import-sort/imports': 'error',
   'simple-import-sort/exports': 'error',
}

在这里插入图片描述

7. 插件版本

过新的版本可能会导致出错

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.60.0",
  "@typescript-eslint/parser": "^5.60.0",
  "eslint": "^7.32.0",
  "eslint-config-prettier": "^8.8.0",
  "eslint-config-standard": "^17.1.0",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-simple-import-sort": "^10.0.0",
  "eslint-plugin-vue": "^9.15.1",
  "prettier": "^3.3.3",
  "vite-plugin-eslint": "^1.8.1",
  "vue-eslint-parser": "^9.3.1"
},

四、最佳实践

ESLint 负责代码质量检测。
Prettier 负责代码格式化。
通过 eslint-config-prettier 解决两者规则冲突，确保工具间协同工作。


原文地址：https://blog.csdn.net/qq_20765533/article/details/143893245

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024