1 practical extensions

1.1 Visual Studio Code Commitizen Support

优化commit流程，自动生成符合规范的commit内容
image.png

1.2 Prettier - Code formatter

用于jsx标签的快速输入
image.png

1.3 Auto Rename Tag

当修改左半tag时自动修改右半tag
image.png

1.4 ESLint

更加规范完整的eslint
image.png

1.5 Path Intellisense

路径自动填充
image.png

1.6 Code Runner

在线运行js等代码
image.png

1.7 Git Lens

标注当前行的git信息
image.png

1.8 Tabnine AI AutoComplete

vscode是个成熟的编辑器了，它已经学会了自己写代码
image.png
当你输入前面一部分代码之后，会自动提示后面部分，只需tab即可
image.png

2 artistical extensions

2.1 Material Icon Theme

改icon用的，能好看点…
image.png

2.2 ES7+ React/Redux/React -Native snippets

作用未知
image.png

2.3 Error Lens

把报错直接显示在行末，方便修改
image.png

2.4 Bracket Pair Colorizer 2

彩色括号，当括号多了看不清时可以用这个，比较清楚
image.png

3 settings

3.1 autosave

setting — 搜索autosave — 修改选项
image.png

3.2 terminal优化

安装参考oh-my-zsh github官网
或者直接运行下面这行代码

  1. sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

image.png
想要更花里胡哨的可以网上找，基本默认的即可 :::tips 进阶补充
配置zsh terminal全局快捷键（以下为mac演示，win系统自行百度）
找到个人文件夹 — 找到.zshrc文件 — 拉到最后
image.png
按如图方式进行配置，-g为全局可选项 :::

3.3 自动格式化配置

setting — 搜索json — 找到下图点击edit
image.png
直接复制下面整段，全部替换即可

  1. {
  2.     "workbench.startupEditor": "none",
  3.     "editor.formatOnSave": true,
  4.     "files.autoSave": "onFocusChange",
  5.     "editor.defaultFormatter": "esbenp.prettier-vscode",
  6.     "git.confirmSync": false,
  7.     // react
  8.     "[javascriptreact]": {
  9.         "editor.defaultFormatter": "esbenp.prettier-vscode"
  10.     },
  11.     "[typescriptreact]": {
  12.         "editor.defaultFormatter": "vscode.typescript-language-features"
  13.     },
  14.     "explorer.confirmDelete": false,
  15.     "editor.fontSize": 15,
  16.     "workbench.iconTheme": "material-icon-theme",
  17.     "git.enableSmartCommit": true,
  18.     // 修改注释颜色
  19.     "editor.tokenColorCustomizations": {
  20.         "comments": {
  21.             "fontStyle": "bold",
  22.             "foreground": "#70c394"
  23.         }
  24.     },
  25.     // 配置文件类型识别
  26.     "files.associations": {
  27.         "*.js": "javascript",
  28.         "*.json": "jsonc",
  29.         "*.cjson": "jsonc",
  30.         "*.wxss": "css",
  31.         "*.wxs": "javascript"
  32.     },
  33.     "extensions.ignoreRecommendations": false,
  34.     "files.exclude": {
  35.         "**/.DS_Store": true,
  36.         "**/.git": true,
  37.         "**/.hg": true,
  38.         "**/.svn": true,
  39.         "**/CVS": true,
  40.         "**/node_modules": false,
  41.         "**/tmp": true
  42.     },
  43.     "explorer.confirmDragAndDrop": false,
  44.     "typescript.updateImportsOnFileMove.enabled": "prompt",
  45.     "editor.tabSize": 2,
  46.     "[json]": {},
  47.     "editor.tabCompletion": "on",
  48.     "vsicons.projectDetection.autoReload": true,
  49.     "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
  50.     "[html]": {
  51.         "editor.defaultFormatter": "vscode.html-language-features"
  52.     },
  53.     "debug.console.fontSize": 14,
  54.     "vsicons.dontShowNewVersionMessage": true,
  55.     "editor.minimap.enabled": true,
  56.     "emmet.extensionsPath": [
  57.         ""
  58.     ],
  59.     // vue eslint start 保存时自动格式化代码
  60.     // eslint配置项，保存时自动修复错误
  61.     "editor.codeActionsOnSave": {
  62.         "source.fixAll": true
  63.     },
  64.     "vetur.ignoreProjectWarning": true,
  65.     // 让vetur使用vs自带的js格式化工具
  66.     // uni-app和vue 项目使用
  67.     "vetur.format.defaultFormatter.js": "vscode-typescript",
  68.     "javascript.format.semicolons": "insert",
  69.     // 指定 *.js 文件的格式化工具为vscode自带
  70.     "[javascript]": {
  71.         "editor.defaultFormatter": "vscode.typescript-language-features"
  72.     },
  73.     // // 默认使用prettier格式化支持的文件
  74.     "prettier.jsxBracketSameLine": true,
  75.     // 函数前面加个空格
  76.     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  77.     "prettier.singleQuote": false,
  78.     // 当按tab键的时候，会自动提示
  79.     "emmet.triggerExpansionOnTab": true,
  80.     "emmet.showAbbreviationSuggestions": true,
  81.     "emmet.includeLanguages": {
  82.         // jsx的提示
  83.         "javascript": "javascriptreact",
  84.         "vue-html": "html",
  85.         "vue": "html",
  86.         "wxml": "html"
  87.     },
  88.     // end
  89.     "[jsonc]": {
  90.         "editor.defaultFormatter": "vscode.json-language-features"
  91.     },
  92.     // @路径提示
  93.     "path-intellisense.mappings": {
  94.         "@": "${workspaceRoot}/src"
  95.     },
  96.     "security.workspace.trust.untrustedFiles": "open",
  97.     "git.ignoreMissingGitWarning": true,
  98.     "eslint.enable": true,
  99.     "eslint.alwaysShowStatus": true,
  100.     "eslint.format.enable": true,
  101.     "eslint.lintTask.enable": true,
  102.     "eslint.quiet": true,
  103.     "eslint.validate": [
  104.         "javascript",
  105.         "javascriptreact",
  106.         "typescript",
  107.         "typescriptreact",
  108.     ],
  109.     "launch": {
  110.         "configurations": [],
  111.         "compounds": []
  112.     },
  113. }

修改后代码将在保存之后自动格式化，省去调代码格式的时间

4 代码规范

4.1 Commit规范

  • feat: 新功能
  • fix: 修复问题
  • docs: 修改文档
  • style: 修改代码格式，不影响代码逻辑
  • refactor: 重构代码，理论上不影响现有功能
  • perf: 提升性能
  • test: 增加修改测试用例
  • chore: 修改工具相关（包括但不限于文档、代码生成等）
  • deps: 升级依赖

    4.2 css规范

  1. 定位（position、left、right、top、bottom、z-index）
  2. 盒子模型（display、float、width、height、margin、padding、border、border-radius）
  3. 排印（font、color、background、line-height、text-align）

5 常用git操作

# 提交全家桶
git add .
git commit -m "message"
git push
  # 如果没有绑定上流分支，则使用下面这行代码固定
git push --set-upstream origin branchNameInCloud
  # 或者直接输入希望push的分支名
git push origin branchNameInCloud

# clone代码
git clone http://...

# 分支操作
git checkout <branchName> # 切换分支
git checkout -b <newBranchName> # 新增本地分支并切换
git branch -d <branchName> # 删除分支
git merge branchName

  ## 高亮行也可替换为以下两行
  git branch <newBranchName>
  git checkout <newBranchName>

# stash相关
git stash # 将目前的diff存入stash中
git stash pop # 弹出stash中第一个diff
git stash list # 查看所有
git stash clear # 清空stash