目录

Visual Studio Code 的使用

简介

Visual Studio Code(简称 VS Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

安装

mac 下执行 brew install visual-studio-code

配置

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
{
  // VSCode settings
  // Text Editor
  "editor.fontFamily": "'FiraCode Nerd Font', Menlo, Monaco, 'Courier New', monospace", // 字体
  "editor.fontLigatures": true, // 字体连字符
  // "editor.fontSize": 14, // 设置字体大小, 默认 14
  "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度,时自动换行
  "editor.wordWrapColumn": 160, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
  "editor.tabSize": 2, // 一个制表符等于的空格数。在 `#editor.detectIndentation#` 启用时,根据文件内容,该设置可能会被覆盖。
  "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格(默认ture,即自动转空格),当editor.detectIndentation配置为 true 时,该配置项将被自动覆盖
  "editor.detectIndentation": true, // 设置是否自动检测对齐,控制打开文件时是否基于文件内容,自动检测editor.tabSize 和editor.insertSpaces
  "editor.inlineSuggest.enabled": true, // 设置是否启用内联提示
  // 开启自动显示建议
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },

  // Text Editor -> Formatting
  "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用
  "editor.formatOnSave": true, // 设置保存文件时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用
  "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
  "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行

  // Text Editor -> Minimap
  "editor.minimap.maxColumn": 120, // 设置minimap的宽度以设置可渲染的最大列数,默认120
  "editor.minimap.renderCharacters": false, // 设置 minimap 渲染成小色块,而不是字符

  // Files
  // "files.autoSave": "afterDelay", //设置延迟一定的时间后自动保存文件
  // "files.autoSaveDelay": 5000, // 设置自动保存文件前需要延迟的时间,单位毫秒 默认1000
  // "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站,默认为true,即允许
  // "files.encoding": "utf8", // 设置读写文件时所用编码 默认UTF-8,可针对每种语言进行设置
  // "files.autoGuessEncoding": false, // 设置打开文件时,是否自动猜测字符编码,默认false,即不自动猜测,可针对每种语言进行设置

  // 设置各种代码的默认格式化器
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },

  // 插件配置
  // Eslint插件配置
  "eslint.enable": true, // 启用/禁用 vscode-eslint。默认情况下是启用的
  "eslint.alwaysShowStatus": true, // 设置状态栏是否一直显示ESlint图标项,true表示一直显示
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // 设置保存时是否自动修复代码
  },
  "eslint.format.enable": false, // 设置是否把ESlint作为一个格式化器,true表示启用

  // Prettier插件配置
  "prettier.useEditorConfig": false, // 设置不使用 .editorconfig 文件
  "prettier.enable": true, // 设置是否开启prettier插件,默认为true,即开启
  // "prettier.semi": false, // 设置是否在每行末尾添加分号,默认为 true
  // "prettier.singleQuote": true, // 设置格式化时,保持单引号,如果设置为true,则单引号会自动变成双引号
  // "prettier.tabWidth": 2, // 设置每个tab占用多少个空格
  // "prettier.printWidth": 120, // 设置每行可容纳字符数
  // "prettier.useTabs": false, // 设置是否使用tab键缩进行,默认为false,即不使用
  // "prettier.bracketSpacing": true, // 在对象,括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}, 默认为true
  // "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
  // "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号

  // Vetur插件配置
  "vetur.format.enable": true, // 设置css代码(<style>包含的代码块)默认格式化器
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.html": "prettier", // 设置html代码(<template>包含的代码块)默认格式化器
  "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置js代码<script>包含的代码块)默认格式化器
  "vetur.format.defaultFormatter.ts": "prettier", // 设置vetur默认使用 prettier格式化代码
  "vetur.format.options.tabSize": 2, // 设置tab键占用的空格数,该配置将被所有格式化器继承
  "vetur.format.options.useTabs": false,

  // Vue-helper 插件配置
  "vue-helper.alias": {
    "@": "src"
  },
  "vue-helper.componentPrefix": {
    "alias": "@",
    "path": "src"
  },

  // Copilot 插件配置
  "github.copilot.enable": {
    "*": true,
    "yaml": false,
    "plaintext": true,
    "markdown": false,
    "javascript": true
  },

  // 主题配置
  "workbench.colorTheme": "One Dark Pro Darker",
  "workbench.iconTheme": "vscode-great-icons",
  "oneDarkPro.vivid": true,
  "oneDarkPro.bold": true
}

插件

Official

Migrating from other editors

Productivity

Beautification

应用场景

如何使用 ESLint+Prettier 来统一前端代码风格

Vue 项目整合 Vetur、ESLint、Prettier

  1. 确认 VSCode 安装了 Vetur、ESLint、Prettier - Code formatter 插件。

  2. 配置 Prettier。

    • 参考 .prettierrc
       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      
      {
        "semi": true,
        "singleQuote": true,
        "tabWidth": 2,
        "printWidth": 120,
        "useTabs": false,
        "bracketSpacing": true,
        "arrowParens": "avoid",
        "trailingComma": "none",
        "htmlWhitespaceSensitivity": "ignore"
      }
      
  3. 配置 VSCode。

    • 参考 settings.json

       1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      
      {
        // Text Editor
        "editor.wordWrap": "bounded", // 设置 超过word Wrap Column设置的字符数、达到视口最小宽度,时自动换行
        "editor.wordWrapColumn": 160, // editor.wordWrap 配置为wordWrapColumn或者bounded时起作用
        "editor.tabSize": 2, // 一个制表符等于的空格数。在 `#editor.detectIndentation#` 启用时,根据文件内容,该设置可能会被覆盖。
        "editor.insertSpaces": true, // 设置输入tab键时是否自动转为插入空格(默认ture,即自动转空格),当editor.detectIndentation配置为 true 时,该配置项将被自动覆盖
        "editor.detectIndentation": true, // 设置是否自动检测对齐,控制打开文件时是否基于文件内容,自动检测editor.tabSize 和editor.insertSpaces
        // 开启自动显示建议
        "editor.quickSuggestions": {
          "other": true,
          "comments": true,
          "strings": true
        },
        // "editor.fontSize": 14, // 设置字体大小, 默认 14
      
        // Text Editor -> Formatting
        "editor.formatOnPaste": true, // 设置黏贴内容时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用
        "editor.formatOnSave": true, // 设置保存文件时是否自动格式化,true表示自动格式化,需要配置格式化器(formatter)才可使用
        "editor.formatOnSaveMode": "file", // 设置保存文件时格式化整个文件还是仅被修改处。该配置项仅在 "editor.formatOnPaste" 为 true时生效
        "editor.formatOnType": true, // 设置输入完成后是否自动格式化当前行
      
        // Text Editor -> Minimap
        "editor.minimap.maxColumn": 120, // 设置minimap的宽度以设置可渲染的最大列数,默认120
        "editor.minimap.renderCharacters": false, // 设置 minimap 渲染成小色块,而不是字符
      
        // Files
        // "files.autoSave": "afterDelay", //设置延迟一定的时间后自动保存文件
        // "files.autoSaveDelay": 5000, // 设置自动保存文件前需要延迟的时间,单位毫秒 默认1000
        // "files.enableTrash": true, // 设置删除文件、目录时是否允许删除到操作系统回收站,默认为true,即允许
        // "files.encoding": "utf8", // 设置读写文件时所用编码 默认UTF-8,可针对每种语言进行设置
        // "files.autoGuessEncoding": false, // 设置打开文件时,是否自动猜测字符编码,默认false,即不自动猜测,可针对每种语言进行设置
      
        // 设置各种代码的默认格式化器
        "[html]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[css]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[javascript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[json]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[vue]": {
          "editor.defaultFormatter": "octref.vetur"
        },
      
        // Eslint插件配置
        "eslint.enable": true, // 启用/禁用 vscode-eslint。默认情况下是启用的
        "eslint.alwaysShowStatus": true, // 设置状态栏是否一直显示ESlint图标项,true表示一直显示
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true // 设置保存时是否自动修复代码
        },
        "eslint.format.enable": false, // 设置是否把ESlint作为一个格式化器,true表示启用
      
        // Prettier插件配置
        "prettier.useEditorConfig": false, // 设置不使用 .editorconfig 文件
        "prettier.enable": true, // 设置是否开启prettier插件,默认为true,即开启
        // "prettier.semi": false, // 设置是否在每行末尾添加分号,默认为 true
        // "prettier.singleQuote": true, // 设置格式化时,保持单引号,如果设置为true,则单引号会自动变成双引号
        // "prettier.tabWidth": 2, // 设置每个tab占用多少个空格
        // "prettier.printWidth": 120, // 设置每行可容纳字符数
        // "prettier.useTabs": false, // 设置是否使用tab键缩进行,默认为false,即不使用
        // "prettier.bracketSpacing": true, // 在对象,括号与文字之间加空格 true - Example: { foo: bar }   false - Example: {foo: bar}, 默认为true
        // "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
        // "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号
      
        // Vetur插件配置
        "vetur.format.enable": true, // 设置css代码(<style>包含的代码块)默认格式化器
        "vetur.format.defaultFormatter.sass": "sass-formatter",
        "vetur.format.defaultFormatter.postcss": "prettier",
        "vetur.format.defaultFormatter.scss": "prettier",
        "vetur.format.defaultFormatter.less": "prettier",
        "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
        "vetur.format.defaultFormatter.html": "prettier", // 设置html代码(<template>包含的代码块)默认格式化器
        "vetur.format.defaultFormatter.js": "prettier-eslint", // 设置js代码<script>包含的代码块)默认格式化器
        "vetur.format.defaultFormatter.ts": "prettier", // 设置vetur默认使用 prettier格式化代码
        "vetur.format.options.tabSize": 2, // 设置tab键占用的空格数,该配置将被所有格式化器继承
        "vetur.format.options.useTabs": false
      }
      
  4. 未安装 eslint 的话,使用 npm 或者 yarn 安装 eslint 和需要的 eslint 插件。npm i -D eslint eslint-plugin-vue

  5. 处理 eslint 和 prettier 的冲突规则。通过关闭 eslint 的自动修复来判断。

VSCode 如何支持三路合并?

  • 安装 sublime merge app
  • 安装 VSCode 插件 Sublime Merge for VSCode
  • 合并遇到冲突后在文件中右键打开 Sublime Merge
  • 点击冲突文件的 resolve,可以进入三路合并