快速配置VSCode开发界面

下载地址

https://code.visualstudio.com/Download

安装插件

  • Auto Close Tag
  • Auto Rename Tag
  • Debugger for Chrome
  • ESLint
  • HTML Snippets
  • Open in Browser
  • Partial Diff
  • Path Autocomplete
  • Project Manager
  • Sass
  • Sass Formatter
  • Vetur

项目中安装 eslint-vue 插件
npm install --save-dev eslint eslint-plugin-vue
参考链接文档

编辑器配置

其中关于字体大小、行高等配置可以自定义,关于vue、eslint的格式规则需要按着相应的规则写,点击左下角设置按钮后,在自定义设置中添加如下:

// 将设置放入此文件中以覆盖默认设置
// 解决MAC环境中CPU高占用的问题
{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/node_modules": true,
    "**/bower_components": true,
    // "**/dist": true
  },
  "files.watcherExclude": {
      "**/.git/objects/**": true,
      "**/.git/subtree-cache/**": true,
      "**/node_modules/**": true,
      "**/tmp/**": true,
      "**/bower_components/**": true,
      // "**/dist/**": true
  },
  // 皮肤
  "workbench.colorTheme": "Monokai",
  // 窗口失去焦点自动保存
  "files.autoSave": "onFocusChange",
  // 编辑粘贴自动格式化
  "editor.formatOnPaste": false,
  // 控制字体系列。
  "editor.fontFamily": "pingfang,Menlo, Monaco, 'Courier New', monospace",
  // 字体大小
  "editor.fontSize": 12,
  // 行高
  "editor.lineHeight": 17,
  // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
  // 窗口失去焦点自动保存
  // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体
  "editor.mouseWheelZoom": true,
  // 行太长自动换行
  "editor.wordWrap": "on",
  // eslint设置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 保存自动修复
  "eslint.autoFixOnSave": true,
  // tab锁紧
  "editor.tabSize": 2,
  // 空格变成......
  "editor.renderWhitespace": "all",
  // formatter for 
                    
                    

你可能感兴趣的:(VueJS)