Formatting method VSCode meet ESlint update the configuration code --2020

Foreword

VSCode had undergone a violent escalation after a user-defined file settings.json, there has been relatively large changes, many plugins home page also wrote a method of changing the relevant settings.

This article is another big blog modify the code set by the user on the basis of the exclusion of error parts and obsolete parts

Thanks greatly!

step

According https://www.cnblogs.com/zhoudawei/p/11198781.html download the appropriate plug-in and open the configuration file
The final modified code as follows:

(If previously settings.jsonthere have code, please remove the outermost following piece of code braces {})

{
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": false,
    //设置tab的缩进为2
    "editor.tabSize": 2,
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验
    // vscode 更新后已经统一使用editor.codeActionsOnsave
    //  #去掉代码结尾的分号
    "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,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    } // 两个选择器中是否换行
}

ps. the effect of this change is to make VSCode not being given, whether before the function can truthfully take effect, please self-test orz

Supplementary encountered problems and their solutions

Use ESlintplug-ins may experience problems could not be loaded:

You will be prompted to use npmmanual installation, then manually install it:

Download Node.jsand install it. (The main problem is to download a long time ago, specifically how to install it at Baidu)
Open a terminal. Note that this time the input npm install eslint -gis likely to have been stuck in the download interface motionless. The correct way is to replace Taobao source
Enter the npm config set registry https://registry.npm.taobao.orgsource exchange, then enter npm config get registrycheck whether success
Enter the npm install eslint -ginstallation ESLint.

There may be follow-up questions, such as the main problem to figure out another update orz eslint