VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。

官网为：https://code.visualstudio.com/

通用插件

Code Runner

图片.png

Code Spell Checker

单词拼写检查

图片.png

Settings Sync

图片.png

Git History

图片.png

carbon.now.sh

代码分享插件

图片.png

顶部代码注释

图片.png

图片.png

前端常用插件

Vetur

图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

image.png

Vue开发设置

“文件 -> 首选项 -> 用户代码片段”

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '',",
            "  data () {",
            "    return {",
            "      ",
            "    };",
            "  },",
            "  methods: {}",
            "}",
            "</script>",
            "",
            "<style  scoped>",
            "</style>"
    ],
        "description": "Log output to console"
    }
}

新建.vue文件，输入vue，按回车，页面结构自动生成

settings.json

{
  "editor.fontFamily": "Fira Code",
  "editor.fontSize": 18,
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  // #去掉代码结尾的分号
  "prettier.semi": false,
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "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代码格式化样式
    }
  }
}