统一开发环境和工具

意义

提升团队协作效率下限

1. VSCode 配置

1.1 settings.json

通过命令面板（Ctrl + Shift + P 或 Cmd + Shift + P）输入 Preferences: Open User Settings (JSON)，直接打开 settings.json 文件。

json

{
  // 1 formatOnSave   自动保存格式化
  // 如果不配置prettier与eslint，则将按照 vscode 默认配置进行格式化
  "editor.formatOnSave": true,

  // 2 prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 3 eslint
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "react"
  ]
}

1.2 插件

代码格式校验

ESLint: 帮助开发过程中遵循代码规范，并能够在保存时自动修复问题。

jsx

// eslint.config.js  -- 项目必须
export default [
  {
    rules: {
      semi: 'error',
      'prefer-const': 'error',
    },
  },
]

Prettier - Code formatter: 代码格式化工具，能自动格式化代码，使之符合规范。

// .prettierrc.cjs  项目中添加，非必须。
// @see: https://www.prettier.cn

EditorConfig for VS Code：帮助团队成员在不同的代码编辑器和 IDE 中维护一致的编码风格的工具。

jsx

  // .editorconfig  -- 项目必须
  # Top-most EditorConfig file
  root = true

  [*]
  # 适用于所有文件类型
  indent_style = tab          # 使用空格进行缩进
  indent_size = 2             # 缩进大小为4个空格
  end_of_line = lf            # 使用 LF 作为行结束符
  charset = utf-8             # 字符集为 UTF-8
  trim_trailing_whitespace = true # 删除行尾空格
  insert_final_newline = true # 文件末尾插入换行符

  [*.md]
  # 对于 Markdown 文件
  trim_trailing_whitespace = false # 保留行尾空格

Stylelint
Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。

javascript

// stylelint.config.js 非必须
module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    'color-no-invalid-hex': true,
    indentation: 2,
  },
}

代码补全

插件名称	功能描述
Vue - Official	为 Vue 3 提供更强大的语法支持。
Tailwind CSS IntelliSense	为 Tailwind CSS 提供智能提示和自动补全。
Auto Rename Tag	修改 HTML 或 JSX 标签时，自动同步修改配对的标签。
Path Intellisense	自动补全文件路径，减少手动输入路径的错误。
Auto Close Tag	自动补全 HTML 标签，并自动添加关闭标签。
Code Spell Checker	检查拼写错误，帮助你更准确地写代码。
Path Autocomplete	自动补全文件路径，减少手动输入路径的错误。

其他

插件名称	功能描述
Bracket Pair Colorizer	为配对的括号上色，帮助你更容易识别括号的范围。
Live Server	本地开发时自动刷新浏览器，方便预览效果。
GitLens	提供 Git 相关信息的可视化，如代码的作者和提交历史。
Fitten Code（一定要装）！！！	专业 AI 编码助手
TONGYI Lingma	智能代码生成（正在尝试），功能同上。
live server	本地开发时自动刷新浏览器，方便预览效果。
i18n Ally	多语言

Code Snippets 代码片段

Vue 3 Snippets: 为 Vue2 和 Vue3 提供代码片段

自定义 Snippets：

jsx

// 1. Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（macOS）打开命令面板。
// 2. 输入 Preferences: Configure User Snippets 并选择该选项。
// 3. 可以选择一个现有语言的 Snippet 文件（如 JavaScript、TypeScript 或 Vue）或选择 New Global Snippets file 创建一个全局 Snippet 文件。
// 4. Snippets 文件的格式是 JSON，使用以下结构添加新的代码片段：
// 举例如下配置后。 新建vue文件，输入‘@’ 后tab键，文件将根据如下模版填充
{
  "Print to console": {
      "scope": "vue,javascript,typescript",
      "prefix": "@",
      "body": [
          "<template>",
          "<div class='${1:container}'>",
          "新内容",
          "</div>",
          "</template>",
          "<script setup lang='ts'>",
          "  ",
          "</script>",
          "<style lang='scss' scoped>",
          "  ",
          "</style>",
      ],
      "description": "vue3"
  }
}

Launch Configuration
- 配置调试环境，比如调试 Node.js 或前端代码：

2. 命令行工具

命令行和命令行解释器之间的关系

可以比作「用户界面」与「操作系统」的关系

在 Windows 上，常见的命令行解释器有 cmd.exe、PowerShell。
在 Unix/Linux 系统上，常见的命令行解释器包括 bash、zsh、sh、ksh。

解释器：Zsh
- Oh My Zsh
  - 插件：zsh-autosuggestions：提供命令自动建议，基于历史记录和常用命令。
  - 插件：Zsh-syntax-highlighting: 语法高亮。
NVM: 管理 Node.js 版本的工具。通过 NVM，你可以轻松地安装、切换和管理多个 Node.js 版本
NRM: 用于管理 NPM（Node Package Manager）镜像源的工具。

Git 别名

可以在各自命令行解释器的配置文件如 ~/.bashrc 或 ~/.zshrc 文件中添加常用 Git 别名，以提高效率。例如：

jsx

alias g='git'
alias gs='git status'
alias ga='git add'
alias gc='git commit'
alias gp='git push'
alias gl='git log --oneline --graph --decorate'
...

3. chrome 插件

解除跨域限制并生成快捷方式。
- windows: https://juejin.cn/post/7280435431328710716
- mac: https://juejin.cn/post/6844903929520586766
FEHelper: 前端助手
- JSON 格式化：
- API 测试：
- 字符串处理：
- 前端性能监测：
- 其它工具：
octotree： GitHub 页面旁边添加一个树状文件结构视图，允许用户更方便地浏览和导航 GitHub 上的项目和文件。

4. 其他工具

supervisor：node 项目的自动重启和保持运行
http-server: 零配置命令行 HTTP 服务器，用于在本地开发环境中快速提供静态文件。

统一开发环境和工具 ​

1. VSCode 配置 ​

1.1 settings.json ​

1.2 插件 ​

2. 命令行工具 ​

3. chrome 插件 ​