vscode配置

1.去掉自动格式化

vs code 关闭保存自动格式化 formatonsave - [vscode] - [html]

解决办法

【方法一】：不用普通保存，用save without format

代码编辑页面---->按F1---->输入save without formatting---->回车 该操作可以用快捷键

【方法二】：关闭自动格式化

代码编辑页面---->按F1---->输入Formatter config---->回车---->"onSave"属性设置为false

2.配置基础插件

• Chinese (Simplified) Language Pack for Visual Studio Code 简体中文包
• GitLens — Git supercharged 源代码管理插件，显示每行代码的最后修改人和更新时间
• Vetur 识别Vue文件，Vue语法高亮
• Eslint Eslint代码检测工具，配置保存自动修复
• npm Intellisense 智能补全npm路径
• Import Cost npm包大小提示
• open in browser 在浏览器打开文件
• Git History 可查看Git历史记录
• Code Runner 快速运行代码片段
• Trailing Spaces 冗余空格高亮
• Auto Close Tag html标签闭合
• Auto Rename Tag html标签重命名
• Color Highlight 色值高亮
• Prettier - Code formatter 代码格式化

3.配置格式化插件

vsCode格式化插件

一、安装插件 ESlint，vetur，Prettier - Code formatter，Manta's Stylus Supremacy【格式化stylus的插件（不用就不装】

二、配置settings.json信息

1. 文件->首选项->设置【也可以快捷键 ctr + ,（window系统） 直接打开
2. 搜索settings.json，点击【settings.json中编辑】
3. 隐藏或删除settings.json中原代码，粘贴以下代码，保存即可

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": false,
    // #每次保存的时候将代码按eslint格式进行修复
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "window.zoomLevel": 0, // 两个选择器中是否换行
    "files.eol": "\n", //设置默认换行符为LF 
    "vetur.format.options.tabSize": 4, //设置首行缩进，默认为2
    "vetur.format.options.useTabs": false
}