vscode格式化代码主题

使用VSCode高效开发Vue项目

主题

安装主题三选一：SynthWave '84

avatar

其他使用过的：One Dark Pro

avatar

Snazzy Operator

avatar

扩展插件

图标插件安装
正在使用：Material Icon Theme

avatar

Vue的语法高亮和提示插件

// 安装 Vetur
**Vetur**

自动重命名配对的 HTML / XML 标签，默认对所有语言激活，可再setting.json中配置

// 安装 Auto Rename Tag
**Auto Rename Tag**

"auto-rename-tag.activationOnLanguage": ["html", "xml", "javascript"]

HTML中的标签自动闭合

// 安装 Auto Close Tag
**Auto Close Tag**

允许用颜色标识匹配的括号

// 安装 Auto Close Tag
**Bracket Pair Colorizer 2**

在文档中显示csss的颜色

// 安装 Color Highlight
**Color Highlight**

• Peek：内联加载 css 文件并在那里进行快速编辑。（Ctrl + Shift + F12）

• Go to：直接跳转到 CSS 文件或在新的编辑器（F12）中打开

• Hover：在符号上悬停显示定义（Ctrl + hover）

// 安装 CSS Peek
**CSS Peek**

代码格式化规范ESLint

// 安装 ESLint
**ESLint**

  // vue使用eslint
  "editor.formatOnSave": false,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "vue",
    "html"
  ]

在文档中预览图片

// 安装 Image preview
**Image preview**

高亮匹配的标签

// 安装 Highlight Matching Tag
**Highlight Matching Tag**

git工具

// 安装 GitLens — Git supercharged
**GitLens — Git supercharged**

在代码中突出显示 TODO，FIXME 和注释

// 安装 TODO Highlight
**TODO Highlight**

彩蛋

个人喜欢花里胡哨-安装敲代码特效 powermode 插件

附录

进入setting.json

复制下面代码，关闭后重启vscode 就ok了

{
  //编辑器字体大小
  "editor.fontSize": 20,
  // ctrl+滑轮改变大小
  "editor.mouseWheelZoom": true,
  // 改变终端
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  // 终端字体
  "terminal.integrated.fontSize": 18,
  // vue使用eslint
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  // vue使用eslint
  "editor.formatOnSave": true,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 配置 ESLint 检查的文件类型
  "eslint.validate": ["javascript", "vue", "html"],
  //终端字体
  "terminal.integrated.fontFamily": "Consolas",
  //行内样式
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.minimap.enabled": true,
  "window.zoomLevel": 0,
  "git.autofetch": true,
  //new
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // vue组件中html代码格式化样式
    }
  },
  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"],
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 1.5px",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 1.5px 0 0",
          "borderStyle": "solid",
          "borderColor": "yellow",
          "borderRadius": "5px",
          "overviewRulerColor": "white"
        }
      }
    }
  },
  "workbench.iconTheme": "material-icon-theme",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "update.mode": "none",
  "diffEditor.ignoreTrimWhitespace": false,
  // "workbench.colorTheme": "Snazzy Operator", // 默认皮肤
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  //设置签代码皮肤样式
  "powermode.enabled": true, //是否启用
  "powermode.presets": "flames", //exploding-rift 爆炸 flames 火焰
  "powermode.enableShake": false //是否抖动
}