vscode配置和前端常用插件备注

1.常用插件

HTML Snippets
HTML CSS Support
Debugger for Chrome
jQuery Code Snippets
Path Intellisense
ESlint
beautify
Atuo Rename Tag
GitLens
git history
Bracket Pair Colorizer
vetur
VueHelper
prettier
guides
Manta's Stylus Supremacy

2.vscode设置保存

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.colorTheme": "One Dark Pro",
  "vsicons.dontShowNewVersionMessage": true,
  "files.autoSave": "onFocusChange",
  "editor.cursorSmoothCaretAnimation": true,
  "window.zoomLevel": -0.6,
  "editor.fontLigatures": true,
  "editor.fontSize": 18,
  "code-runner.runInTerminal": true,
  //prettier
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.printWidth": 180,
  "prettier.jsxSingleQuote": true,
  "files.associations": {
    "*.wxss": "css",
    "*.vue": "vue"
  },
  "workbench.tree.renderIndentGuides": "always",
  "terminal.integrated.cursorBlinking": true,
  "merge-conflict.autoNavigateNextConflict.enabled": true,
  "explorer.confirmDelete": false,
  // editor
  // #每次保存的时候自动格式化
  "editor.formatOnType": true,
  "editor.smoothScrolling": true,
  "editor.tabCompletion": "on",
  "editor.detectIndentation": false,
  "editor.minimap.maxColumn": 100,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSaveDelay": 100,
  "vsicons.projectDetection.autoReload": true,
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautify"]
    },
    "css": ["css", "scss"],
    "html": [
      "htm",
      "html",
      "vue" //在这里加上vue
    ]
  },
  "[vue]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "guides.enabled": false,
  "workbench.iconTheme": "vscode-icons-mac",
  "explorer.confirmDragAndDrop": false,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "editor.wordWrapColumn": 100 // 两个选择器中是否换行
}

3. vue代码片段快捷键

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "name:'<!-- $0 -->'",
      "  components:{},",
      "  data () {",
      "    return {",
      "",
      "    };",
      "  },",
      "",
      "//生命周期 - 挂载完成（访问DOM元素）",
      "  mounted:{},",
      "",
      "  methods:{",
      "",
      "  },",
      "",
      "//生命周期 - 创建完成（访问当前this实例）",
      "  created(){",
      "",
      "  },",
      "}",

      "",
      "</script>",
      "<style  scoped>",
      "",
      "</style>"
    ],
    "description": "Log output to console"
  }
}