(一) 插件相关

1. 通用插件

1. 标签自动成对修改
   Auto Rename Tag

2. 目标文件自动联想
   AutoFileName

3. 背景图效果
   background

4. 括号颜色成对高亮显示
   Bracket Pair Colorizer

5. VSCode汉化包
   Chinese (Simplified)

6. '颜色属性'高亮显示
   Color Highlight

7. git扩展
   GitLens

8. 辅助你正确拼写 '单词命名'
   Code Spell Checker

2. angular常用插件

9. 在html文件中查看跳转
   Angular Language Servicer

10. angular语法智能提示
    Angular Snippetsr

3. react常用插件

11. react语法智能提示
    ES7 React/Redux/GraphQL/React-Native snippets

(二) settings.json 配置文件

{
  // 删除文件最终行后的所有行
  "files.trimFinalNewlines": true,
  // 删除文件末尾的空格
  "files.trimTrailingWhitespace": true,
  // 忽略因不同编辑器提交的代码中,前导空格和尾随空格中的修改
  "diffEditor.ignoreTrimWhitespace": true,
  // 禁止滚动到文件最后一行后还能继续滚动
  "editor.scrollBeyondLastLine": false,

   // js优先使用单引号
   "javascript.preferences.quoteStyle": "single",
  // js行尾添加分号
  "javascript.format.semicolons": "insert",
  // ts优先使用单引号
  "typescript.preferences.quoteStyle": "single",
  // ts行尾添加分号
  "typescript.format.semicolons": "insert",

  // 左侧工具栏
  "workbench.activityBar.visible": false, // 隐藏最左侧的工具栏
  "explorer.openEditors.visible": 0, // 隐藏左侧边栏上的 OpenEditors

  // 右侧缩略图
  "editor.minimap.enabled": false, // 隐藏右侧缩略图
  "editor.minimap.showSlider": "always", // 一直显示滚动条

  // terminal 光标样式
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",

  // 优先候选用户自定义代码片段
  "editor.snippetSuggestions": "top",
  "workbench.startupEditor": "newUntitledFile",

  // 按顺序整理导入的文件
  "editor.codeActionsOnSave": {
     "source.organizeImports": true
  },

  // 设置tab按键缩进为 '2个单位'
  "editor.detectIndentation": false,
  "editor.tabSize": 2,

  // 字号
  "editor.fontSize": 12,
  // 字体
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  // 每行输入字符长度提示线
  "editor.rulers": [80,100],
  // 快速打开文件时,关闭预览模式,直接打开文件
  "workbench.editor.enablePreviewFromQuickOpen": false,
  // 单击侧边栏打开文件时,关闭预览模式,直接打开文件
  "workbench.editor.enablePreview": false,
  // 隐藏 tab 栏文件名左侧的文件类型图标
  "workbench.editor.showIcons": false,
  // 当前行对应的行号栏也高亮显示
  "editor.renderLineHighlight": "all",
  // 平滑滚动
  "editor.smoothScrolling": true,
  // 禁止连接文字可点击，取消下划线
  "editor.links": false,

  // "Background" 插件背景图设置
  "background.useDefault": false, //不使用默认背景图
  "background.useFront": false, //设置背景图在代码后面
  "background.style": {
      "opacity": 0.3, //背景图透明度
      "background-size": "100% 100%" //背景图大小
   }, 
  "background.customImages": [
      "file:///Users/XXXX/Documents/scenery.png" //背景图路径
   ],

   // 自定义主题风格
  "editor.tokenColorCustomizations": {
      "comments": {
          "fontStyle": "italic", // 设置注释字体样式 bold italic underline
          "foreground": "#aaaaaa" // 设置注释字体颜色
      },
      "keywords": "#0a0", // 自定义关键字颜色
      "variables": "#f00", // 自定义变量名颜色
      "strings": "#e2d75dbd", // 自定义字符串颜色
      "functions": "#5b99fcc9", // 自定义函数名颜色
      "numbers": "#AE81FF", // 自定义数字颜色
   },
    // 默认使用prettier格式化'typescript'
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 默认使用prettier格式化'typescriptreact'
    "[typescriptreact]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 启用后,点击'Tab'将展开'Emmet'补全标签
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {"typescript": "typescriptreact"},
      // 配合"[Code Spell Checker]"插件, 自定义单词拼写,不高亮提示错误
     "cSpell.userWords": [
          "example1",
          "example2",
          "example3"
     ],
}