js加載json文件，js 讀取json文件_JavaScript 項目中常見配置文件介紹

原文地址：https://github.com/whinc/blog/issues/14

本文介紹一些前端項目的通用配置及相關資源，以便你了解項目中常見配置的含義以及配置方式。

.gitignore - 讓 Git 提交時忽略文件

通過.gitignore文件可將項目中符合規則的文件忽略掉，避免提交帶有敏感信息或不需要共享的文件到 Git 倉庫。

JavaScript 項目常用配置：

# dependencies
/node_modules# testing
/coverage# production
/build# vscode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json# env
.env.local
.env.*.local# misc
.DS_Store# package manager
npm-debug.log*
yarn-debug.log*
yarn-error.log*

gitignore 是 Github 官方維護的一份 git ignore 配置，可從中查找所需配置規則。

.editorconfig - 讓編輯器或IDEs保持一致的編碼樣式

js加載json文件？EditorConfig可以幫助在不同的編輯器和IDE上從事同一項目的多個開發人員保持一致的編碼樣式。 EditorConfig項目包括一個用于定義編碼樣式的文件格式和一個文本編輯器插件集合，這些文本編輯器插件使編輯器可以讀取文件格式并遵循定義的樣式。 EditorConfig文件易于閱讀，并且可以與版本控制系統很好地協同工作。

配置示例：

# editorconfig.org
root = true[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true[*.md]
trim_trailing_whitespace = false

更多配置參考 EditorConfig

commitizen - 交互式生成 Angular 風格的 Git 提交消息

使用 Commitizen 進行提交時，系統會提示您在提交時填寫所有必需的提交字段，你只需要根據提示填寫提交信息，Commitizen 會保證最終提交的消息符合 Angular Commit Message Conventions 格式。

如果你的項目是對 Commitizen 友好的（即已經安裝了 Commitizen 依賴），則在項目下提交消息時可直接使用npx git-cz來替代git commit命令。否則，你需要按照下面指引安裝依賴，讓你的項目變為對 Commitizen 友好的。

js引入json文件并使用，使項目對 Commitizen 友好

通過 npm 安裝

npm install --save-dev commitizen

初始化適配器

npx commitizen init cz-conventional-changelog --save-dev --save-exact

提交代碼

# 暫存修改的代碼
git add .# 提交代碼，該命令替代 git commit
npx git-cz# 重新提交（使用上次輸入的 commit 消息，這在提交失敗后再次提交時特別有用）
npx git-cz --retry

參考Commit message 和 Change log 編寫指南。

Prettier- 美化代碼格式

Prettier 是一個代碼格式化程序（處理縮進、換行、空格等），它解析代碼成抽象語法樹(AST)并根據自定義格式重新輸出代碼，保證代碼邏輯不變的前提下代碼格式統一。它支持眾多常見語言，例如 js/jsx/ts/tsx/json/css/scss/vue/yaml 等。

使用JSON 讀取文件？格式化指定文件

通過 npm 安裝

npm install --save-dev prettier

執行下面命令后，prettier 格式化指定文件內容。

npx prettier --write "src/**/*.js"

格式化本次 git 提交的文件

通過 npm 安裝依賴

npm install --save husky lint-staged

在package.json中添加如下配置，之后執行git commit前會對本次提交的文件進行格式化并添加到本次提交中。也可以直接執行npx lint-staged格式化本次待提交文件。

"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write","git add"]}

獲取配置文件、創建 .prettierrc 配置文件進行自定義。

## ESLint- 檢查 JS 代碼質量

ESLint 是一個可插拔的 JS 和 JSX 檢查工具。

檢查指定文件

通過 npm 安裝

npm install --save-dev eslint

執行下面命令后，eslint 會讀取項目下的配置文件，然后對輸入文件進行檢查，并輸出檢查結果。

npx eslint "src/**/*.js"

js寫入json文件、檢查本次 git 提交的文件

通過 npm 安裝依賴

npm install --save-dev husky lint-staged

在package.json中添加如下配置，之后執行git commit前 eslint 會對本次提交文件進行檢查，如果檢查存在問題（即 shell 指令返回非 0）則終止本次提交。

"lint-staged": {"src/**/*.{js,jsx}": "eslint"},"husky": {"hooks": {"pre-commit": "lint-staged"}}

創建 .eslintrc 配置文件進行自定義，如果不知道如何配置，可執行eslint --init，然后根據提示做出選擇，eslint 會自動生成一份配置文件。

Stylelint- 檢查 CSS 代碼質量

Stylelint 是一個強大的現代 CSS 檢測器，可以讓你在樣式表中遵循一致的約定和避免錯誤。

通過 npm 安裝

npm install --save-dev stylelint

js讀寫json文件。使用 CLI 檢測樣式文件

npx stylelint "src/**/*.css"

結合 husky 使用，在提交代碼前執行檢查

"husky": {"hooks": {"pre-commit": "stylelint src/**/*.css"}}

結合 husky 和 lint-staged 一起使用，檢查本次提交中修改的文件

"lint-staged": {"src/**/*.css": "stylelint"},"husky": {"hooks": {"pre-commit": "lint-staged"}}

創建 .stylelintrc 配置文件進行自定義。

預設配置 * stylelint-config-recommended

參考

node-blog 3.1 開發前的項目配置

最后

js配置文件。個人能力有限，肯定有疏漏，歡迎指正。如果遺漏了你喜歡的通用配置項，歡迎文末補充。