vscode开发配置

• vscode settings.json

    // 直接把下面的内容复制到vscode.json文件里面就可以
    // 一个tab键等于两个空格
    "editor.tabSize": 2,
    // 配置后缀名为vue的文件识别为vue文件，并进行语法检查 association->协会、关联
    "files.associations": {
        "*.vue": "vue"
    },
    // 保存时，按照eslintrc.js/eslintrc.json文件规则修复代码格式，默认只支持.js文件
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
    //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": ["javascript", "vue", "html"],
     // 下面的文件下不受eslint规则检查
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    // vscode在一般*.vue的文件下，html的代码是不能自动补全的，即便安装vetur插件也不可以，这时候就用到了emmet插件，vscode内置了emmet插件，这里我们做一下配置就好了
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    // 同步git前请确认
    "git.confirmSync": false,
    // vscode窗口的大小，数值越大，窗口和字体都将变大
    "window.zoomLevel": 0,
    // 如何渲染空白，boundary:渲染代码缩进的空白
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    // 关闭vscode右上角出现的代码预览功能
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    //设置边界的字体
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    // 设置vscode窗口中间title显示 文件路径-当前项目
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "jsdoc.author": "wenyan",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }

  "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "prettier.semi": false,
    "files.associations": {
        "*.vue": "vue"
    },
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    "prettier.singleQuote": true,
    //autoFixedOnSave 设置已废弃，采用如下新的设置
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": false,
    //autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    // "[javascript]": {
    //     "editor.defaultFormatter": "vscode.typescript-language-features"
    // },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "editor.fontSize": 20,
    "vetur.format.defaultFormatter.html": "prettyhtml",
     // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
        "singleQuote": true,
        "semi": false
        }
    },

vscode 插件
Vue VSCode Snippets、Vetur、Prettier - Code formatter、CSS Navigation(跳转到定义的css位置)、Document This、
Eslint、GitLens、HTML CSS Support、Quokka.js、Live Server