# vue+ts+vite 基础配置 **Repository Path**: bugeiguojiatuohoutui/vue-base ## Basic Information - **Project Name**: vue+ts+vite 基础配置 - **Description**: 配置 eslint、prettier、stylelint、commitlint 比较麻烦，这里做一个基建 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2023-11-15 - **Last Updated**: 2024-04-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 每次开发配置环境烦得很 这里做个基础仓：vue3 + ts + vite 具体环境放到不同分支中， - 移动端用 ‘’vant‘，对应分支也是 ‘vant’ - pc 端后台用 ‘element-plus’，同样对应同名分支 ## 如何使用 1. 克隆项目 以移动 web 开发为例 ```shell git clone --single-branch -b vant git@gitee.com:bugeiguojiatuohoutui/vue-base.git 'ele-ts' ``` 这条命令的意思是：仅克隆远程的 vant 分支，并将项目命名为 'ele-ts' 然后把分支名称改为 ‘master’ ```shell git branch -m vant master ``` 最后更改远程仓库地址（可能需要） ```shell git remote set-url origin <远程仓库地址> ``` 2. 配置 git 账户（可能需要） 进入项目目录 ```shell git config --global user.name "xxx" git config --global user.email "xxx@x.com" ``` 如果是多 git 账户，需要删除 `--config` 3. 安装依赖 ```shell cnpm i # 或 npm i ``` 4. 让 commitlint 生效 commitlint 需要在 git hooks 中执行，初始化 hooks： ```shell npx husky install ``` 至此项目初始化完毕 ## 项目基本环境说明 2023年11月15日： - vue@3.3 - vite@4.4 - typescript@5.0 - eslint@8.53 - prettier@3.1 - stylelint@15.11 - husky@8.0 ## 编辑器环境 2023年11月15日 - vscode@1.84 - ESLint`v2.4.2` - Prettier - Code formatter`v10.1.0` - Stylelint`v1.3.0` - vscode 的 'settings.json' npm 包、vscode 版本、vscode 相关扩展的更新，可能造成无法识别项目目录中 '.prettierrc(.js|.cjs|.json)' 或 '.stylelintrc' 配置文件的情况，从而导致保存时不能自动格式化代码，解决办法是在 vscode 设置中指定这些规则文件： ```json "prettier.configPath": ".prettierrc.cjs", "stylelint.configFile": ".stylelintrc.cjs", ``` 上面的设置只是指定了规则文件名，因为默认情况下，这些文件指的就是当前项目目录。换句话说， settings.json 设置所指定的文件，就是项目目录中相关规则文件。 默认情况下规则优先级是：项目规则文件 > vscode settings.json 设置的规则文件 > settings.json 中具体配置规则。 项目规则文件和 settings.json 中具体配置规则的修改，都是即时生效的。如果需要重启 vscode 才生效，那么就说明没能识别出规则文件，而是 settings.json 中设置的文件生效了。 > 还没遇到过 eslintrc 不能自动识别的情况，如果遇到也可用同样方式解决。 ## 项目分支，具体环境 2023年11月15日 - master，基本分支 - scss，在 master 基础上，css 预编译用 scss - vant，在 scss 基础上做移动端，基于 vant@4 - element-plus@xx，做 pc 端后台 ## 项目基本环境说明 ### vite、vue、ts 直接用官方提供的命令模板 ```shell npm create vite@latest ele-ts -- --template vue-ts ``` ### git hooks 与 husky Git Hooks是一种Git版本控制系统提供的扩展功能，它允许在Git存储库的特定事件发生时自动执行自定义脚本。存储在.git/hooks目录中。编写 hooks 需要对shell 和 git 有一定的了解。Git Hooks通常只在本地存储库中执行，而不是远程版本库，因此需要在每个克隆仓库中安装相应的钩子脚本。 Husky 是一个 Git Hooks 工具，它可以在 Git 操作时触发自定义的脚本。它是一个基于 npm 包管理器的 Node.js 模块，可以轻松地添加、管理、同步 Git Hooks。使用 Husky，开发者可以在 Git 提交、推送、合并等操作前后执行预定义的脚本来确保代码质量、遵循代码规范、运行测试等任务。Husky 提供了易于使用的 API，可以灵活地定义钩子事件和脚本命令，并支持跨平台部署。 安装 husky ```shell cnpm i husky -D ``` 初始化 husky 的 git hooks ```shell npx husky install ``` ### commitlint Commitlint 是一个用于检查 Git 提交消息格式的工具。它可以帮助开发者规范化提交消息，从而提高代码质量和可读性。它可以与 Husky 等 Git Hooks 工具集成，实现在 Git 提交时自动检查提交消息。 规范要求按照如下格式提交 commit 信息 `type(scope?): subject` - type，commit 类型，常见值： - feat 新功能 - fix 修复 - perf 性能 - refactor 重构 - scope，可选，表示当前 commit 修改的模块范围，比如更改了哪个文件、哪个函数等。 - subject，commit 的内容。 #### 安装 commitlint 1. 先安装 '@commitlint/config-conventional' 和 '@commitlint/cli' 可以用 {xx,xx2} 的方式同时安装相同前缀的两个包，逗号后面不能有空格 > 该命令需要在 shell 中，cmd 中可能报错无法运行 ```shell cnpm i -D @commitlint/{config-conventional,cli} ``` 2. 配置 commitlint，根目录新建 ‘commitlint.config.cjs’ ```js module.exports = { // 继承的规则 extends: ["@commitlint/config-conventional"], // @see: https://commitlint.js.org/#/reference-rules rules: { "subject-case": [0], // subject大小写不做校验 // 类型枚举，git提交type必须是以下类型 "type-enum": [ 2, "always", [ 'feat', // 新增功能 'fix', // 修复缺陷 'docs', // 文档变更 'style', // 代码格式（不影响功能，例如空格、分号等格式修正） 'refactor', // 代码重构（不包括 bug 修复、功能新增） 'perf', // 性能优化 'test', // 添加疏漏测试或已有测试改动 'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等） 'ci', // 修改 CI 配置、脚本 'revert', // 回滚 commit 'chore', // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例） ], ], }, }; ``` 3. 添加 hook ```shell npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1' ``` 至此，git 提交时就有格式要求了，否则无法提交 ### eslint、prettier 对于 vscode 而言，首先安装 eslint 和 prettier 扩展。配置 ctrl+s 可自动格式化（也是这个原因，没安装 ‘lint-staged’）。 `ctrl+shift+p`，输入 'format'，选择 ‘使用...格式化’，接着选择 ‘配置默认格式化程序’，选择 'prettier..'。 ESLint 更关注代码质量和规范性，而 Prettier 则专注于自动化的代码格式化。配合开发工具的 prettier 插件、git 钩子，自动格式化代码风格是 prettier 相对于 eslint 在代码风格上的优势。所以可以两者配置使用。 根据官方介绍，eslint 将取消代码风格上的校验：https://eslint.org/blog/2023/10/deprecating-formatting-rules/。 也就是说，以后 eslint 校验语法，prettier 校验规则，当然这都是后话。 1. 安装 eslint ```shell npm i -D eslint ``` 2. 初始化 elinst ```shell npx eslint --init ``` 根据提示一步步选择，最后安装过程由于不是 cnpm 安装，如果没有配置 npm 的国内镜像，会比较慢。 > 提示： > > 如果更改了镜像源，那么都以更改后的镜像源为准安装 > > 如果没有更改，而上面用了 `cnpm i`，这里不得不用 `npm`，可能出现一些错误，需要删除 node_modules 目录重新安装 > > 总之，尽量使用同一个镜像源安装依赖 ```shell ? How would you like to use ESLint? ... To check syntax only > To check syntax and find problems # 选这个 To check syntax, find problems, and enforce code style ``` ```shell ? What type of modules does your project use? ... > JavaScript modules (import/export) # 选这个 CommonJS (require/exports) None of these ``` ```shell ? Which framework does your project use? ... React > Vue.js # 选这个 None of these ``` ```shell ? Does your project use TypeScript? » No / Yes # 选 yes ``` ```shell ? Where does your code run? ... (Press to select, to toggle all, to invert selection) √ Browser # 选这个 √ Node ``` ```shell ? What format do you want your config file to be in? ... > JavaScript # 选这个 YAML JSON ``` ```shell @typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest ? Would you like to install them now? » No / Yes # 选 yes ``` ```shell ? Which package manager do you want to use? ... > npm # 选这个 yarn pnpm ``` 3. 根据自身编辑器配置 eslint 的忽略文件 '.eslintignore'。 ```shell *.sh node_modules lib *.md *.scss *.woff *.ttf .vscode .idea .history dist mock public bin build config index.html src/assets ``` 4. 安装 prettier 和 相关包 - eslint-config-prettier，用来禁用一些与 Prettier 格式化冲突的 ESLint 规则。 - eslint-plugin-prettier，使得 Prettier 的格式化功能能够在 ESLint 检查过程中自动执行。 ```shell npm i -D prettier eslint-plugin-prettier eslint-config-prettier ``` 5. 配置 prettier 规则，根目录新建 '.prettierrc.cjs' ```js module.exports = { // 一行最多多少个字符 printWidth: 150, // 指定每个缩进级别的空格数 tabWidth: 2, // 使用制表符而不是空格缩进行 useTabs: true, // 在语句末尾打印分号 semi: true, // 使用单引号而不是双引号 singleQuote: true, // 更改引用对象属性的时间 可选值"" quoteProps: 'as-needed', // 在JSX中使用单引号而不是双引号 jsxSingleQuote: false, // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值""，默认none trailingComma: 'es5', // 在对象文字中的括号之间打印空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x arrowParens: 'always', // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 rangeStart: 0, rangeEnd: Infinity, // 指定要使用的解析器，不需要写文件开头的 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma: false, // 使用默认的折行标准 always\never\preserve proseWrap: 'preserve', // 指定HTML文件的全局空格敏感度 css\strict\ignore htmlWhitespaceSensitivity: 'css', // Vue文件脚本和样式标签缩进 vueIndentScriptAndStyle: false, // 换行符使用 lf 结尾是 可选值"" endOfLine: 'lf', }; ``` 6. 配置 prettier 忽略文件 '.prettierignore' ```shell /dist/* /html/* .local .history /node_modules/** **/*.svg **/*.sh /public/* ``` 7. 配置 eslint 规则，'.eslintrc.cjs' ```js module.exports = { env: { browser: true, es2021: true, node: true, jest: true, }, /* 指定如何解析语法 */ parser: "vue-eslint-parser", parserOptions: { ecmaVersion: "latest", parser: "@typescript-eslint/parser", sourceType: "module", }, extends: [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential", ], overrides: [ { env: { node: true, }, files: [".eslintrc.{js,cjs}"], parserOptions: { sourceType: "script", }, }, ], plugins: ["@typescript-eslint", "vue"], rules: { // 参考 https://typescript-eslint.io/ // 禁止// @ts-ignore // "@typescript-eslint/ban-ts-ignore": "off", //要求函数和类方法有显式返回类型。 "@typescript-eslint/explicit-function-return-type": "off", //禁用any类型 "@typescript-eslint/no-explicit-any": "off", //除 import 语句外，不允许使用 require 语句。 "@typescript-eslint/no-var-requires": "off", //禁止空函数 "@typescript-eslint/no-empty-function": "off", //在定义变量之前禁止使用变量。 "@typescript-eslint/no-use-before-define": "off", //禁止 @ts- 注释或要求指令后有描述。 "@typescript-eslint/ban-ts-comment": "off", //禁止某些类型。 "@typescript-eslint/ban-types": "off", //禁止使用 ! 进行非空断言后缀运算符。 "@typescript-eslint/no-non-null-assertion": "off", //要求导出函数和类的公共类方法显式返回和参数类型。 "@typescript-eslint/explicit-module-boundary-types": "off", // 参考 https://eslint.vuejs.org/rules/ //强制执行自定义事件名称的特定大小写 "vue/custom-event-name-casing": "off", //强制执行属性顺序 "vue/attributes-order": "off", //强制每个组件都应位于自己的文件中 "vue/one-component-per-file": "off", //不允许在标签的右括号之前换行 "vue/html-closing-bracket-newline": "off", //强制每行的最大属性数 "vue/max-attributes-per-line": "off", //需要在多行元素的内容之前和之后换行 "vue/multiline-html-element-content-newline": "off", //需要在单行元素的内容之前和之后换行 "vue/singleline-html-element-content-newline": "off", //对模板中的自定义组件强制执行属性命名样式 "vue/attribute-hyphenation": "off", //强制执行自关闭风格 "vue/html-self-closing": "off", //禁止向模板添加多个根节点 "vue/no-multiple-template-root": "off", "vue/require-default-prop": "off", //禁止向自定义组件中使用的 v-model 添加参数 "vue/no-v-model-argument": "off", //禁止使用箭头函数来定义观察者 "vue/no-arrow-functions-in-watch": "off", //禁止