vsCode 插件

分享并记录一下我用的插件

1599037563(1)
链接分享

settings.json配置

{
  "svn.enableProposedApi": "product",

  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,

  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },

  "eslint.enable": true,

  // 配置 ESLint 检查的文件类型
  // "eslint.validate": [ "javascript", "javascriptreact", "vue" ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    // {
    //   "language": "html",
    //   "autoFix": true
    // },
    {
      "language": "vue",
      "autoFix": true
    }
  ],

  //保存时eslint自动修复错误
  "eslint.autoFixOnSave": true,
  //保存自动格式化
  "editor.formatOnSave": true,

  "vetur.validation.template": true,
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, //不加分号
      "singleQuote": true //用单引号
    }
  },

  // 以一配置要写在单独的 .prettier.json 文件中才有效果？这是配置对js文件生效的，Vue文件使用上面的vetur配置替代
  // 格式化快捷键（默认）：Shift+Alt+F
  // "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.tabWidth": 2,
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用单引号替代双引号

  // JSON格式化
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "editor.quickSuggestions": {
    "strings": true
  },
  "workbench.sideBar.location": "left",
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#FF4081",
    "list.activeSelectionForeground": "#FF4081",
    "list.inactiveSelectionForeground": "#FF4081",
    "list.highlightForeground": "#FF4081",
    "scrollbarSlider.activeBackground": "#FF408150",
    "editorSuggestWidget.highlightForeground": "#FF4081",
    "textLink.foreground": "#FF4081",
    "progressBar.background": "#FF4081",
    "pickerGroup.foreground": "#FF4081",
    "tab.activeBorder": "#FF4081",
    "notificationLink.foreground": "#FF4081",
    "editorWidget.resizeBorder": "#FF4081",
    "editorWidget.border": "#FF4081",
    "settings.modifiedItemIndicator": "#FF4081",
    "settings.headerForeground": "#FF4081",
    "panelTitle.activeBorder": "#FF4081",
    "breadcrumb.activeSelectionForeground": "#FF4081",
    "menu.selectionForeground": "#FF4081",
    "menubar.selectionForeground": "#FF4081",
    "editor.findMatchBorder": "#FF4081",
    "selection.background": "#FF408140"
  },
  "materialTheme.accent": "Pink",
  "terminal.integrated.rendererType": "dom"
}