Vue3 + TypeScript + Vite 初始项目搭建（ESLint、Prettier、Sass

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

如何，执行如下命令，安装其他所需的和 ESlint 相关的依赖：

pnpm i eslint-import-resolver-alias @typescript-eslint/parser@6 eslint-plugin-prettier eslint-config-prettier -D

• eslint-import-resolver-alias：
  • 在使用 ESLint 进行代码检查时，经常会遇到 import 模块时无法识别别名(alias)的问题，这是因为 ESLint 默认不支持在 import 语句中使用别名(alias)。
  • 为了解决这个问题，我们需要安装此 ESLint 插件，然后在 ESLint 配置文件中配置 import/resolver 的 alias 选项，这个选项用于指定如何解析 import 语句中的别名(alias)。
  • 此插件依赖 eslint-plugin-import。
• @typescript-eslint/parser：
  • 因为 TypeScript 生成的 AST 格式与 ESLint 工作所需的格式不同，所以该插件是用于将 TypeScript 代码解析为兼容 ESLint 的 ESLint 解析器以及提供支持的 TypeScript 程序。
  • 官方文档：https://typescript-eslint.io/packages/parser/
• eslint-plugin-prettier：这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。
• eslint-config-prettier：让所有与 prettier 规则存在冲突的 ESLint rules 失效，避免 ESLint 和 prettier 冲突；

生成的 ESLint 配置文件的相关解释说明

生成的 ESLint 配置文件的相关解释说明：

module.exports = {
    // 项目代码运行的环境
    "env": {
        // 浏览器环境
        "browser": true,
        // es 模块化规范 import/export
        "es2021": true,
        // node 环境
        "node": true
    },
    // 本项目继承的 eslint 规则
    "extends": [
        // 标准的 ts 语法规则
        "standard-with-typescript",
        // vue3 语法规则
        "plugin:vue/vue3-essential"
    ],
    // 对继承的规则进行重写
    "overrides": [
        {
            // 运行环境
            "env": {
                // 允许项目在 node 环境下运行
                "node": true
            },
            // eslint 配置文件的文件名
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            // 解析器配置
            "parserOptions": {
                // 源码类型为脚本 script （默认）
                "sourceType": "script"
            }
        }
    ],
    // 解析器选项
    "parserOptions": {
        // ECMA 版本为最新版本
        "ecmaVersion": "latest",
        // 源码类型，使用 es 模块化
        "sourceType": "module"
    },
    // 插件
    "plugins": [
        "vue"
    ],
    // 自定义 eslint 规则
    "rules": {
    }
}

修改 ESLint 配置文件

由于后面使用不到生成 ESLint 配置文件时安装的 eslint-config-standard-with-typescript 插件，所以这里将其卸载：

pnpm uninsatll eslint-config-standard-with-typescript

对生成的 ESLint 配置文件进行修改，修改后的内容如下：

由于后续会为项目中的 src 目录配置别名 @，为了使在使用 ESLint 进行代码检查时，遇到使用别名 import 模块时，不报错，使 ESLint 能够支持别名配置，所以在 ESLint 配置文件中 import/resolver 的 alias 选项，配置如何解析 import 语句中的别名，依赖 eslint-import-resolver-alias 和 eslint-plugin-import 插件。

module.exports = {
    // 项目代码运行的环境
    env: {
        // 浏览器环境
        browser: true,
        // es 模块化规范 import/export
        es2021: true,
        // node 环境
        node: true,
        // jest 测试环境
        jest: true,
    },
    // 指定解析语法的解析器
    // parser 的作用是将我们写的代码转换为 ESTree（AST）
    // ESLint 会对 ESTree 进行校验
    parser: 'vue-eslint-parser',
    // 优先级低于 parse 的语法解析器配置
    parserOptions: {
        // es 模块化版本
        ecmaVersion: 'latest',
        // 源码类型为模块化语法，使用 esm 模块化规范
        sourceType: 'module',
        // ts eslint 的解析器
        parser: '@typescript-eslint/parser',
        // jsx tsx 语法规则
        jsxPragma: 'React',
        // ecma 特性，允许使用 jsx、tsx
        ecmaFeatures: {
            tsx: true,
            jsx: true,
        },
    },
    // 本项目继承的 eslint 规则
    extends: [
        // eslint 推荐的规则
        'eslint:recommended',
        // vue3 语法规则
        'plugin:vue/vue3-essential',
        // typescript-eslint 推荐的规则
        'plugin:@typescript-eslint/recommended',
        // prettier 推荐的规则
        // 继承使用 eslint 规则插件时࿰