eslint vscode 自动格式化_VS CODE开发配置

为了方便管理项目，放弃了轻量快速的sublime，投入了VS code的怀抱。

一，首先配置自动保存格式化模板

a，下载Prettier - Code formatter和ESLint插件，如下图。

b，下一步File>Preferences>settings（文件>首选项>设置），打开用户设置文件（USER SETTINGS）

    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "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,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },

2，文件注释

a，下载koroFileHeader注释插件，如下图。

b，下一步File>Preferences>settings（文件>首选项>设置），打开用户设置文件（USER SETTINGS）

    // 注释
    "fileheader.configObj": {
        // 将该选项设置为true即可开启
        "autoAdd": true
    },
    // 头部注释
    "fileheader.customMade": {
        "Author": "wyj",
        "Date": "Do not edit",
        "LastEditors": "wyj",
        "LastEditTime": "Do not edit",
        "Description": ""
    },
    // 函数注释
    "fileheader.cursorMode": {
        "Date": "Do not edit",
        "description": "",
        "param": ""
    },

注意：Author和LastEditors填写自己的名字

文件头注释快捷键：window：ctrl+alt+i,mac：ctrl+cmd+i

函数注释快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t

三，我是VS CODE就是这样，至于好用不好，用了才知道。