vue项目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊

这篇具有很好参考价值的文章主要介绍了vue项目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Git配置文件

1、Husky

Husky 是一款管理 git hooks 的工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push，有助于我们在项目开发中的git规范和团队协作。

.husky文件通常包含以下内容：

pre-commit：在提交代码前运行的脚本，可以用于代码格式化、代码检查等操作；
pre-push：在推送代码前运行的脚本，可以用于运行测试、代码分析等操作；
commit-msg：在提交代码时检查提交信息是否符合规范的脚本，可以用于规范化提交信息。

2. commitlint.config.js配置

commitlint.config.js 文件是一个配置文件，用于配置 commitlint 工具，该工具用于检查 Git 提交信息是否符合规范。这个文件的作用是为 commitlint 提供一些配置，以便在检查提交信息时能够按照指定的规则进行检查。

在这个文件中，你可以定义提交信息的规则，例如规定提交信息必须包含特定的前缀，或者规定提交信息的长度不能超过一定的限制等。

这个文件通常会被放置在项目的根目录下，以便 commitlint 能够找到它并读取其中的配置信息。

3、lint-staged

使用 husky 后，ESLint会在项目中的每个文件上都运行，这是个非常糟糕的主意。因为在未更改的代码上运行ESLint可能会导致出乎预料的错误。

对于大型项目，在每个文件上运行ESLint可能会消耗大量的时间。同样，在旧项目中消耗时间解决ESLint抛出的问题而不是研发新功能，是没意义的事。

那么，我们如何只在我们更改的代码上运行 ESLint?

答案是lint-staged。它的作用是只在当前提交中对已更改的文件运行 pre-commit hooks。并且还能对代码进行更多的设置，比如使用 prettier 格式化代码

新增 lint-staged.config.cjs 文件

module.exports = {
  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
  "package.json": ["prettier --write"],
  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
  "*.md": ["prettier --write"]
};

.cjs 文件其实就是js文件，只是更加明显的说明这是一个模块文件，并且模块声明遵循的是CommonJS的标准。因此同理，也有 .mjs 的文件，表明这个文件是遵循ESM标准（ECMAScript Modules）的模块文件

4、 .gitattributes文件的作用

.gitattributes 文件是 Git 用来管理文件属性的配置文件，主要用于指定文件的特定属性，如文本或二进制、换行符格式等。它可以帮助 Git 在不同操作系统上正确地处理文件，以及防止不必要的合并冲突。

一些常见的用法包括：

指定文件的文本或二进制属性
指定文件的换行符格式
指定文件的合并策略
指定文件的 diff 策略
指定文件的语言
.gitattributes 文件可以放在项目的任何级别，包括根目录和子目录，Git 在匹配文件时会按照从高到低的优先级依次查找。如果在一个目录下找不到 .gitattributes 文件，Git 会一直向上级目录查找，直到找到为止。

.gitattributes 文件的语法比较灵活，可以使用通配符和正则表达式来匹配文件名，也可以指定多个属性。例如：

_.txt text
_.bin binary
\*.md diff=markdown

这个文件指定了三个规则：

所有 .txt 文件都被视为文本文件，可以进行 diff 和 merge 操作
所有 .bin 文件都被视为二进制文件，不能进行 diff 和 merge 操作
所有 .md 文件使用 Markdown 格式进行 diff，可以方便地查看文件变化
总之，.gitattributes 文件是一个非常有用的工具，可以帮助我们更好地管理 Git 仓库中的文件。

5、.gitignore文件的作用

.gitignore文件是一个文本文件，它列出了在Git版本控制下忽略的文件和目录。当你在项目中添加了一些文件时，Git会默认跟踪它们，但是有些文件并不需要跟踪，例如编译后的文件，日志文件，配置文件等等，这些文件可以通过.gitignore文件来忽略，以防止它们被提交到仓库中。

.gitignore文件可以在仓库的根目录中创建，也可以在子目录中创建。它可以包含文件名、通配符和注释。例如，以下是一个.gitignore文件的示例：

# 忽略所有 .log 文件

\*.log

# 忽略 dist 目录下的所有文件

/dist/\*

# 忽略 node_modules 目录下的所有文件

/node_modules/\*

当Git进行提交、推送或拉取操作时，会自动忽略.gitignore中指定的文件和目录。

二、代码风格规范配置文件

1、 .editorconfig文件的作用

.editorconfig文件是一种用于定义和维护跨多个编辑器和IDE的代码风格的文件格式。它可以帮助团队成员在不同的编辑器和IDE中保持一致的代码格式，从而减少代码风格带来的问题。例如，它可以定义缩进、换行符、字符集等细节。编辑器和IDE可以通过插件或内置功能来支持.editorconfig文件。

2、.prettierignore文件的作用

.prettierignore 文件的作用是告诉 Prettier 哪些文件不需要应用 Prettier 的格式化规则。这些文件可能是由其他工具生成的或者是不需要格式化的文件，如图片、二进制文件等。在 .prettierignore 文件中列出的文件将被 Prettier 忽略，不会被格式化。

.prettierignore 文件的格式与 .gitignore 文件相似，每行列出一个要忽略的文件或目录，支持通配符和注释。例如，以下是一个简单的 .prettierignore 文件：

node_modules/
dist/
*.jpg

上述代码将忽略 node_modules/ 目录、dist/ 目录和所有 .jpg 文件。

3、.stylelintignore的作用

.stylelintignore 文件用于配置 stylelint 工具忽略检查的文件和目录，其作用类似于 .gitignore 文件。在项目中使用 stylelint 工具进行样式代码的检查时，可以通过 .stylelintignore 文件，指定不需要进行检查的文件或目录。这样可以提高工具的检查效率，避免对不必要的文件进行检查。

三、.env文件的作用

1、 .env文件的作用：

.env文件是一个用于存储环境变量的文件。在开发应用程序时，我们经常需要在不同的环境中运行应用程序，例如开发、测试和生产环境。每个环境都可能需要不同的配置，例如数据库连接、API密钥等。``.env`文件可以让我们在每个环境中轻松地设置这些配置。

例如，我们可以在.env文件中设置以下环境变量：

DB_HOST=localhost
DB_PORT=27017
DB_NAME=mydatabase
VITE_APP_TITLE=My Production App

在Node.js应用程序中，我们可以使用dotenv模块来读取.env文件中的环境变量。该模块会将.env文件中的键值对读取到Node.js的process.env对象中，我们可以通过process.env来访问这些环境变量。

然后，在Node.js应用程序中，我们可以通过以下方式读取这些环境变量：
```
const dbHost = process.env.DB_HOST;
const dbPort = process.env.DB_PORT;
const dbName = process.env.DB_NAME;
```
在 Vite、Vue 3、或者一些现代的前端构建工具中，import.meta.env 提供了一种访问环境变量的新方法。

import.meta.env 对象包含了从项目根目录下的 .env 文件中读取的环境变量。这些环境变量通常是根据当前的模式（如 development、production、test 等）来选择的。

当您构建或运行您的应用程序时，构建工具（如 Vite）会根据当前的模式加载相应的 .env 文件，并将这些变量注入到 import.meta.env 对象中。

然后，在 Vue 3 或 Vite 项目中可以使用 import.meta.env读取这些环境变量:
```
import.meta.env.MODE
import.meta.env.VITE_APP_API_KEY
```

.env文件通常不应该被提交到版本控制系统中，因为它可能包含敏感信息。在开发团队中，通常会在不同的环境中使用不同的.env文件，并且不同的环境会有不同的配置。例如，我们可以在本地开发环境中使用一个.env.local文件，而在生产环境中使用一个.env.production文件。这些文件应该被保护，并且不应该被提交到版本控制系统中。

2、 .env.development文件的作用:

.env和.env.development是两个不同的文件。

.env文件是用于配置环境变量的文件，可以在项目中通过process.env来获取这些变量。这个文件中定义的变量将会在所有的环境中被加载，包括开发环境、测试环境和生产环境。

.env.development文件则是用于开发环境的配置文件。在Vue CLI项目中，只有在开发环境下才会加载该文件，用于覆盖.env文件中的一些变量。例如，我们可以在.env文件中定义一个VUE_APP_BASE_URL变量，表示API的基础URL地址，然后在.env.development文件中重新定义该变量，指向我们的本地测试服务器。

这样做的好处是，我们可以在不同的环境中定义不同的变量，而不需要修改代码。例如，在生产环境中，我们可以将VUE_APP_BASE_URL变量指向我们的生产服务器，而在测试环境中，我们可以将其指向我们的测试服务器，而不需要修改代码。

3、 .env.production文件的作用

.env、.env.development 和 .env.production 文件是用来配置环境变量的文件。它们的作用分别是：

.env 文件是默认的环境变量文件，无论当前的环境是开发环境还是生产环境，都会被加载；
.env.development 文件是在开发环境下使用的环境变量文件，只有在开发环境下才会被加载；
.env.production 文件是在生产环境下使用的环境变量文件，只有在生产环境下才会被加载。
这些文件通常包含一些敏感信息，如数据库连接字符串、API密钥等，因此应该被妥善保管。在项目中，我们可以使用 process.env 对象来访问这些环境变量。例如，在 Vue.js 中，我们可以在组件中通过 process.env.VUE_APP_API_URL 来访问 .env 文件中定义的 VUE_APP_API_URL 变量。

四、eslint配置文件

1、 .eslintignore文件的作用

.eslintignore 文件用于告诉 ESLint 忽略某些文件或目录，不进行检查。

例如，如果你有一些自动生成的代码或者测试代码，你可以将这些代码添加到 .eslintignore 文件中，这样 ESLint 就不会检查这些文件了。

.eslintignore 文件的语法与 .gitignore 文件类似，可以使用通配符来匹配多个文件或目录。例如：

# 忽略所有 .js 文件

\*.js

# 忽略 node_modules 目录

node_modules/

需要注意的是，.eslintignore 文件只对 ESLint 生效，其他工具如 Prettier、Stylelint 等不会使用这个文件。如果你需要忽略某些文件的话，需要在各自工具的配置文件中进行设置。

2、 .eslintrc.js文件的作用

.eslintignore 文件是用来指定哪些文件在 ESLint 检查中应该被忽略的。在这个文件中，你可以指定需要忽略的文件、目录、通配符等。这个文件的作用类似于 .gitignore 文件，但是它只用于 ESLint 的检查。

.eslintrc.js 文件是 ESLint 的配置文件，它用来指定 ESLint 的规则和配置项。在这个文件中，你可以指定需要使用的规则、插件、解析器等。通过修改这个文件，你可以让 ESLint 在代码检查时按照你的需求进行配置。

五、TS配置文件

1、tsconfig.json文件的作用

tsconfig.json 文件是 TypeScript 编译器的配置文件，用于指定 TypeScript 项目的编译选项和编译过程中需要引用的文件。

在 tsconfig.json 文件中，你可以指定编译器选项，例如：文章来源地址https://www.toymoban.com/news/detail-861102.html

compilerOptions: 用于指定 TypeScript 编译器选项，例如编译输出目标、模块解析方式、ES 版本等。
include: 用于指定需要编译的文件或目录。
exclude: 用于指定不需要编译的文件或目录。
当你在项目中使用 TypeScript 时，会自动生成 tsconfig.json 文件，你可以根据自己的需要进行修改。

到了这里，关于vue项目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！