美文网首页金鹏堡
VsCode简单配置

VsCode简单配置

作者: 沐青之枫 | 来源:发表于2018-01-30 16:49 被阅读422次
    1. vscode基础开发插件
    vscode-icons 图标美化
    Debugger for Chrome 调试
    
    Beautify 代码格式化
    Prettier 代码格式化
    ESLint 代码规范
    JavaScript (ES6) code snippets javascript语法提示
    
    vetur vue必备
    VueHelper vue及相关技术栈语法提示
    Sass sass文件高亮&格式化
    Stylus language stylus编码支持
    
    Auto Close Tag 自动闭合标签
    Auto Rename Tag 自动更改对应标签名
    Path Autocomplete 自动补全路径
    
    Git Lens 本地项目git管理
    View in Browser 右击在浏览器打开文件
    Markdown All in One markdown支持
    Npm npm支持
    Npm Intellisense npm友好化
    
    1. 配置vscode settings.json
    {
        // 基础设置
        "editor.tabSize": 2,
        "workbench.iconTheme": "vscode-icons",
        "workbench.startupEditor": "welcomePage",
        "editor.quickSuggestions": {
            "strings": true
        },
    
        // vue设置
        "emmet.syntaxProfiles": {
            "vue-html": "html",
            "vue": "html"
        },
        "files.associations": {
            "*.vue": "vue"
        },
    
        // vetur设置
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        "vetur.format.defaultFormatter.js": "vscode-typescript",
    
        // eslint设置
        "eslint.autoFixOnSave": true,
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
                "language": "html",
                "autoFix": true
            },
            {
                "language": "vue",
                "autoFix": true
            }
        ],
        // format设置
        "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
        "prettier.singleQuote": true,
        "prettier.semi": false,
        "prettier.useTabs": true,
    
        // git设置
        "gitlens.advanced.messages": {
            "suppressCommitHasNoPreviousCommitWarning": false,
            "suppressCommitNotFoundWarning": false,
            "suppressFileNotUnderSourceControlWarning": false,
            "suppressGitVersionWarning": false,
            "suppressLineUncommittedWarning": false,
            "suppressNoRepositoryWarning": false,
            "suppressUpdateNotice": false,
            "suppressWelcomeNotice": true
        }
    }
    
    1. ESLint配置文件
    (1)eslint --init 然后选择自己的代码风格(当然,上面的配置与选择项对应修改)
    (2)按照cube-ui的代码风格设定(推荐)
    工程中.eslintrc.js文件
    
    module.exports = {
        root: true,
        parser: 'babel-eslint',
        parserOptions: {
            sourceType: 'module'
        },
        // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
        extends: 'standard',
        // required to lint *.vue files
        plugins: [
            'html'
        ],
        // add your custom rules here
        'rules': {
            // allow paren-less arrow functions
            'arrow-parens': 0,
            // allow async-await
            'generator-star-spacing': 0,
            // allow debugger during development
            'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
            'no-tabs': 0,
            'space-before-function-paren': 0
        }
    }
    

    相关文章

      网友评论

        本文标题:VsCode简单配置

        本文链接:https://www.haomeiwen.com/subject/wkvczxtx.html