项目的全局项目环境基础配置

全局基础环境配置

在写项目时，尤其是写一些小团队项目，团队之间的开发环境需要保持一致（这真的很重要），这样可以有效维护远程仓库的提交规范和代码的格式规范，可以大大提高团队之间的开发效率。同时也利于项目的后期维护和再开发。

接下来展示我的项目的环境配置。只是大致思路，仅供参考，可以设置属于你们自己的环境配置。

1、.vscode的相关配置

（1）extensions.json项目中用到的插件推荐列表

{
  // 推荐的扩展插件
  "recommendations": [
    "mrmaoddxxaa.create-uniapp-view", // 创建 uni-app 页面
    "uni-helper.uni-helper-vscode", // uni-app 代码提示
    "evils.uniapp-vscode", // uni-app 文档
    "vue.volar", // vue3 语法支持
    "vue.vscode-typescript-vue-plugin", // vue3 ts 插件
    "editorconfig.editorconfig", // editorconfig
    "dbaeumer.vscode-eslint", // eslint
    "esbenp.prettier-vscode", // prettier
    "eggjs.vscode-eggjs" // eggjs
  ]
}

（2）settings.json项目环境设置

{
  // 指定工作台中使用的文件图标主题
  "workbench.iconTheme": "material-icon-theme",
  // 是否让函数名和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // 调整窗口的缩放级别，原始大小是 0
  "window.zoomLevel": 0,
  // 在保存时格式化文件
  "editor.formatOnSave": true,
  //粘贴时自动格式化
  "editor.formatOnPaste": false,
  // 去掉最后一行的逗号
  "prettier.trailingComma": "none",
  // 使用单引号而不是双引号
  "prettier.singleQuote": true,
  // 在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/target": true,
    "**/logs": true
  },
  // 文件格式化配置
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 配置语言的文件关联
  "files.associations": {
    "*.json": "jsonc",
    "*.vue": "vue3"
  },
  // 控制相关文件嵌套展示
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    "*.ts": "$(capture).test.ts, $(capture).test.tsx",
    "*.tsx": "$(capture).test.ts, $(capture).test.tsx",
    "*.env": "$(capture).env.*",
    "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,README*,.npmrc,.browserslistrc",
    ".editorconfig": ".eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc,.stylelintignore,.commitlintrc.js,.stylelintrc.js"
  },
  "terminal.integrated.scrollback": 10000,
  "eggHelper.serverPort": 45953
}

• 保持所有开发者安装了相同的插件和相同的配置，保持开发环境一致性

2、.prettierrc的基本配置

Prettier 一款强大的代码格式化插件拓展，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本适用于前端能用到的所有文件格式，是当下最流行的代码格式化工具。

相关拓展插件：Prettier - Code formatter

（1）下载相关依赖

# 安装 prettier
pnpm install prettier --save-dev
# package.json 字段排序插件
pnpm install prettier-plugin-packagejson --save-dev
# import 顺序自动调整插件
pnpm install prettier-plugin-organize-imports --save-dev
# 安装 prettier 整合 eslint 的库
pnpm install eslint-plugin-prettier eslint-config-prettier --save-dev

// .prettierrc
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-organize-imports"]
}

以上是 Prettier 常用的相关配置项，如果你想用其他的配置项，可以去官网自行查看 Options · Prettier 中文网，Prettier中其他的配置项

（2）添加忽略格式化文件.prettierignore

node_modules/
*-lock.yaml

（3）添加eslint相关配置.eslintrc.cjs、.eslintignore

可写可不写（我的是将后端服务项目文件和前端项目文件都放在同一目录下了，各个项目文件内会再具体配置eslint相关）

// .eslintrc.cjs
module.exports = {
  root: true,
  extends: ['plugin:prettier/recommended']
}

// .eslintignore
node_modules/

3、.editorconfig相关配置

（1）相关拓展插件：EditorConfig for VS Code

EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员保持一致的编码风格

如果你想丰富你的配置，以vue项目为例，你可以到vue官方仓库中去看看人家怎么写的，也是不错的借鉴方式。

// .editorconfig
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

4、git提交规范设置

husky是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。
lint-staged:🚫💩(github.com)可以在 Git 暂存区的文件上运行指定的 lint 工具，以便于仅在需要时执行 lint 检查。可以配置多个 lint 工具，例如 ESLint、Prettier、Stylelint 等。

@commitlint/cli 遵循 Conventional Commits 规范，用于校验 Git 提交信息是否符合规范。

简单来说，就是为了团队开发代码时，提交规范的格式代码，方便仓库的管理。以下内容，需要的时候直接复制粘贴就好了。

（1）安装相关依赖

pnpm add husky -D
pnpm add lint-staged -D
pnpm add @commitlint/cli @commitlint/config-conventional -D

（2）运行相关脚本

# 生成 .husky 的文件夹
npx husky install

# 添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit "pnpm --no-install lint-staged"

pnpm pkg set scripts.prepare="husky install"

// 添加 commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

（3）生成的文件

pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm --no-install lint-staged

commit-msg:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

（4）在 scripts 下添加相关配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint-staged": "lint-staged",
    "prettier": "prettier --write .",
    "prepare": "husky install"
  },

（5）在 package.json 中根结构新增 lint-staged 配置

"lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write src/"
    ],
    "*.{scss,less,css,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ]
  },

（6）在项目根目录新建 commitlint.config.cjs

module.exports = {
  extends: ['@commitlint/config-conventional'],
};