一、Git配置文件

1、Husky

Husky 是一款管理 git hooks 的工具，可以幫助我們觸發(fā)git提交的各個階段：pre-commit、commit-msg、pre-push， 有助于我們在項目開發(fā)中的git規(guī)范和團隊協(xié)作。

.husky文件通常包含以下內(nèi)容：

• pre-commit：在提交代碼前運行的腳本，可以用于代碼格式化、代碼檢查等操作；
• pre-push：在推送代碼前運行的腳本，可以用于運行測試、代碼分析等操作；
• commit-msg：在提交代碼時檢查提交信息是否符合規(guī)范的腳本，可以用于規(guī)范化提交信息。

2. commitlint.config.js配置

commitlint.config.js 文件是一個配置文件，用于配置 commitlint 工具，該工具用于檢查 Git 提交信息是否符合規(guī)范。這個文件的作用是為 commitlint 提供一些配置，以便在檢查提交信息時能夠按照指定的規(guī)則進(jìn)行檢查。

在這個文件中，你可以定義提交信息的規(guī)則，例如規(guī)定提交信息必須包含特定的前綴，或者規(guī)定提交信息的長度不能超過一定的限制等。

這個文件通常會被放置在項目的根目錄下，以便 commitlint 能夠找到它并讀取其中的配置信息。

3、lint-staged

使用 husky 后，ESLint會在項目中的每個文件上都運行，這是個非常糟糕的主意。因為在未更改的代碼上運行ESLint可能會導(dǎo)致出乎預(yù)料的錯誤。

對于大型項目，在每個文件上運行ESLint可能會消耗大量的時間。同樣，在舊項目中消耗時間解決ESLint拋出的問題而不是研發(fā)新功能，是沒意義的事。

那么，我們?nèi)绾沃辉谖覀兏牡拇a上運行 ESLint?

答案是lint-staged。它的作用是只在當(dāng)前提交中對已更改的文件運行 pre-commit hooks。并且還能對代碼進(jìn)行更多的設(shè)置，比如使用 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的標(biāo)準(zhǔn)。因此同理，也有 .mjs 的文件，表明這個文件是遵循ESM標(biāo)準(zhǔn)（ECMAScript Modules）的模塊文件

4、 .gitattributes文件的作用

.gitattributes 文件是 Git 用來管理文件屬性的配置文件，主要用于指定文件的特定屬性，如文本或二進(jìn)制、換行符格式等。它可以幫助 Git 在不同操作系統(tǒng)上正確地處理文件，以及防止不必要的合并沖突。

一些常見的用法包括：

• 指定文件的文本或二進(jìn)制屬性
• 指定文件的換行符格式
• 指定文件的合并策略
• 指定文件的 diff 策略
• 指定文件的語言
  .gitattributes 文件可以放在項目的任何級別，包括根目錄和子目錄，Git 在匹配文件時會按照從高到低的優(yōu)先級依次查找。如果在一個目錄下找不到 .gitattributes 文件，Git 會一直向上級目錄查找，直到找到為止。

.gitattributes 文件的語法比較靈活，可以使用通配符和正則表達(dá)式來匹配文件名，也可以指定多個屬性。例如：

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

這個文件指定了三個規(guī)則：

• 所有 .txt 文件都被視為文本文件，可以進(jìn)行 diff 和 merge 操作
• 所有 .bin 文件都被視為二進(jìn)制文件，不能進(jìn)行 diff 和 merge 操作
• 所有 .md 文件使用 Markdown 格式進(jìn)行 diff，可以方便地查看文件變化
  總之，.gitattributes 文件是一個非常有用的工具，可以幫助我們更好地管理 Git 倉庫中的文件。

5、.gitignore文件的作用

.gitignore文件是一個文本文件，它列出了在Git版本控制下忽略的文件和目錄。當(dāng)你在項目中添加了一些文件時，Git會默認(rèn)跟蹤它們，但是有些文件并不需要跟蹤，例如編譯后的文件，日志文件，配置文件等等，這些文件可以通過.gitignore文件來忽略，以防止它們被提交到倉庫中。

.gitignore文件可以在倉庫的根目錄中創(chuàng)建，也可以在子目錄中創(chuàng)建。它可以包含文件名、通配符和注釋。例如，以下是一個.gitignore文件的示例：

# 忽略所有 .log 文件

\*.log

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

/dist/\*

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

/node_modules/\*

當(dāng)Git進(jìn)行提交、推送或拉取操作時，會自動忽略.gitignore中指定的文件和目錄。

二、代碼風(fēng)格規(guī)范配置文件

1、 .editorconfig文件的作用

.editorconfig文件是一種用于定義和維護(hù)跨多個編輯器和IDE的代碼風(fēng)格的文件格式。它可以幫助團隊成員在不同的編輯器和IDE中保持一致的代碼格式，從而減少代碼風(fēng)格帶來的問題。例如，它可以定義縮進(jìn)、換行符、字符集等細(xì)節(jié)。編輯器和IDE可以通過插件或內(nèi)置功能來支持.editorconfig文件。

2、.prettierignore文件的作用

.prettierignore 文件的作用是告訴 Prettier 哪些文件不需要應(yīng)用 Prettier 的格式化規(guī)則。這些文件可能是由其他工具生成的或者是不需要格式化的文件，如圖片、二進(jìn)制文件等。在 .prettierignore 文件中列出的文件將被 Prettier 忽略，不會被格式化。

.prettierignore 文件的格式與 .gitignore 文件相似，每行列出一個要忽略的文件或目錄，支持通配符和注釋。例如，以下是一個簡單的 .prettierignore 文件：

node_modules/
dist/
*.jpg

上述代碼將忽略 node_modules/ 目錄、dist/ 目錄和所有 .jpg 文件。

3、.stylelintignore的作用

.stylelintignore 文件用于配置 stylelint 工具忽略檢查的文件和目錄，其作用類似于 .gitignore 文件。在項目中使用 stylelint 工具進(jìn)行樣式代碼的檢查時，可以通過 .stylelintignore 文件，指定不需要進(jìn)行檢查的文件或目錄。這樣可以提高工具的檢查效率，避免對不必要的文件進(jìn)行檢查。

三、.env文件的作用

1、 .env文件的作用：

.env文件是一個用于存儲環(huán)境變量的文件。在開發(fā)應(yīng)用程序時，我們經(jīng)常需要在不同的環(huán)境中運行應(yīng)用程序，例如開發(fā)、測試和生產(chǎn)環(huán)境。每個環(huán)境都可能需要不同的配置，例如數(shù)據(jù)庫連接、API密鑰等。``.env`文件可以讓我們在每個環(huán)境中輕松地設(shè)置這些配置。

例如，我們可以在.env文件中設(shè)置以下環(huán)境變量：

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

• 在Node.js應(yīng)用程序中，我們可以使用dotenv模塊來讀取.env文件中的環(huán)境變量。該模塊會將.env文件中的鍵值對讀取到Node.js的process.env對象中，我們可以通過process.env來訪問這些環(huán)境變量。

  然后，在Node.js應(yīng)用程序中，我們可以通過以下方式讀取這些環(huán)境變量：

  const dbHost = process.env.DB_HOST;
  const dbPort = process.env.DB_PORT;
  const dbName = process.env.DB_NAME;
  

• 在 Vite、Vue 3、或者一些現(xiàn)代的前端構(gòu)建工具中，import.meta.env 提供了一種訪問環(huán)境變量的新方法。

  import.meta.env 對象包含了從項目根目錄下的 .env 文件中讀取的環(huán)境變量。這些環(huán)境變量通常是根據(jù)當(dāng)前的模式（如 development、production、test 等）來選擇的。

  當(dāng)您構(gòu)建或運行您的應(yīng)用程序時，構(gòu)建工具（如 Vite）會根據(jù)當(dāng)前的模式加載相應(yīng)的 .env 文件，并將這些變量注入到 import.meta.env 對象中。

  然后，在 Vue 3 或 Vite 項目中可以使用 import.meta.env讀取這些環(huán)境變量:

  import.meta.env.MODE
  import.meta.env.VITE_APP_API_KEY
  

.env文件通常不應(yīng)該被提交到版本控制系統(tǒng)中，因為它可能包含敏感信息。在開發(fā)團隊中，通常會在不同的環(huán)境中使用不同的.env文件，并且不同的環(huán)境會有不同的配置。例如，我們可以在本地開發(fā)環(huán)境中使用一個.env.local文件，而在生產(chǎn)環(huán)境中使用一個.env.production文件。這些文件應(yīng)該被保護(hù)，并且不應(yīng)該被提交到版本控制系統(tǒng)中。

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

.env和.env.development是兩個不同的文件。

.env文件是用于配置環(huán)境變量的文件，可以在項目中通過process.env來獲取這些變量。這個文件中定義的變量將會在所有的環(huán)境中被加載，包括開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境。

.env.development文件則是用于開發(fā)環(huán)境的配置文件。在Vue CLI項目中，只有在開發(fā)環(huán)境下才會加載該文件，用于覆蓋.env文件中的一些變量。例如，我們可以在.env文件中定義一個VUE_APP_BASE_URL變量，表示API的基礎(chǔ)URL地址，然后在.env.development文件中重新定義該變量，指向我們的本地測試服務(wù)器。

這樣做的好處是，我們可以在不同的環(huán)境中定義不同的變量，而不需要修改代碼。例如，在生產(chǎn)環(huán)境中，我們可以將VUE_APP_BASE_URL變量指向我們的生產(chǎn)服務(wù)器，而在測試環(huán)境中，我們可以將其指向我們的測試服務(wù)器，而不需要修改代碼。

3、 .env.production文件的作用

.env、.env.development 和 .env.production 文件是用來配置環(huán)境變量的文件。它們的作用分別是：

• .env 文件是默認(rèn)的環(huán)境變量文件，無論當(dāng)前的環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，都會被加載；
• .env.development 文件是在開發(fā)環(huán)境下使用的環(huán)境變量文件，只有在開發(fā)環(huán)境下才會被加載；
• .env.production 文件是在生產(chǎn)環(huán)境下使用的環(huán)境變量文件，只有在生產(chǎn)環(huán)境下才會被加載。
  這些文件通常包含一些敏感信息，如數(shù)據(jù)庫連接字符串、API密鑰等，因此應(yīng)該被妥善保管。在項目中，我們可以使用 process.env 對象來訪問這些環(huán)境變量。例如，在 Vue.js 中，我們可以在組件中通過 process.env.VUE_APP_API_URL 來訪問 .env 文件中定義的 VUE_APP_API_URL 變量。

四、eslint配置文件

1、 .eslintignore文件的作用

.eslintignore 文件用于告訴 ESLint 忽略某些文件或目錄，不進(jìn)行檢查。

例如，如果你有一些自動生成的代碼或者測試代碼，你可以將這些代碼添加到 .eslintignore 文件中，這樣 ESLint 就不會檢查這些文件了。

.eslintignore 文件的語法與 .gitignore 文件類似，可以使用通配符來匹配多個文件或目錄。例如：

# 忽略所有 .js 文件

\*.js

# 忽略 node_modules 目錄

node_modules/

需要注意的是，.eslintignore 文件只對 ESLint 生效，其他工具如 Prettier、Stylelint 等不會使用這個文件。如果你需要忽略某些文件的話，需要在各自工具的配置文件中進(jìn)行設(shè)置。

2、 .eslintrc.js文件的作用

.eslintignore 文件是用來指定哪些文件在 ESLint 檢查中應(yīng)該被忽略的。在這個文件中，你可以指定需要忽略的文件、目錄、通配符等。這個文件的作用類似于 .gitignore 文件，但是它只用于 ESLint 的檢查。

.eslintrc.js 文件是 ESLint 的配置文件，它用來指定 ESLint 的規(guī)則和配置項。在這個文件中，你可以指定需要使用的規(guī)則、插件、解析器等。通過修改這個文件，你可以讓 ESLint 在代碼檢查時按照你的需求進(jìn)行配置。

五、TS配置文件

1、tsconfig.json文件的作用

tsconfig.json 文件是 TypeScript 編譯器的配置文件，用于指定 TypeScript 項目的編譯選項和編譯過程中需要引用的文件。

在 tsconfig.json 文件中，你可以指定編譯器選項，例如：文章來源地址http://www.zghlxwxcb.cn/news/detail-861102.html

• compilerOptions: 用于指定 TypeScript 編譯器選項，例如編譯輸出目標(biāo)、模塊解析方式、ES 版本等。
• include: 用于指定需要編譯的文件或目錄。
• exclude: 用于指定不需要編譯的文件或目錄。
  當(dāng)你在項目中使用 TypeScript 時，會自動生成 tsconfig.json 文件，你可以根據(jù)自己的需要進(jìn)行修改。

到了這里，關(guān)于vue項目的Husky、env、editorconfig、eslintrc、tsconfig.json配置文件小聊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！