(Visual Studio Code) Visual Studio Code 基础使用

插件相关

• 通用插件

  • 自动闭合标签（输入标签时，自动生成成对标签）
    Auto Close Tag

  • 自动修改标签（修改标签时，自动修改成对标签）
    Auto Rename Tag

  • 目标路径辅助引导
    AutoFileName

  • 背景图效果
    background

  • 标签高亮显示
    Highlight Matching Tag

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

  • 颜色属性高亮显示
    Color Highlight

  • 实时预览
    Live Server

  • 辅助你正确拼写单词
    Code Spell Checker

  • 在你的默认浏览器中打开链接
    Open In Default Browser

  • git扩展
    GitLens

  • TODO高亮显示
    TODO Highlight

  • 汉化包
    Chinese (Simplified)

• Angular插件

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

  • angular语法智能提示
    Angular Snippetsr

• React插件

  • 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"
         ],
 }