zoukankan      html  css  js  c++  java
  • VS Code 配置 前端

    用户设置

    打开 文件 > 首选项 > 用户设置(U),(忽略覆盖工作区提示)

    {
       // 控制字体系列。
        "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
        // 以像素为单位控制字号。
        "editor.fontSize": 18,
        // 控制选取范围是否有圆角
        "editor.roundedSelection": false,
        // 建议小组件的字号
        "editor.suggestFontSize": 16,
        // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
        "explorer.openEditors.visible": 0,
        // 是否已启用自动刷新
        "git.autorefresh": false,
        // 是否启用了自动提取。
        "git.autofetch": false,
        // 以像素为单位控制终端的字号,这是 editor.fontSize 的默认值。
        "terminal.integrated.fontSize": 14,
        // 控制终端游标是否闪烁。
        "terminal.integrated.cursorBlinking": true,
        // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
        "editor.tabSize": 2,
        // Tab Size
        "beautify.tabSize": 2
    }
    { // VScode主题配置
        "editor.tabSize": 2,
        "editor.lineHeight": 24,
        "editor.renderLineHighlight": "none",
        "editor.renderWhitespace": "none",
        "editor.fontFamily": "Consolas",
        "editor.fontSize": 15,
        "editor.cursorBlinking": "smooth",
        "editor.multiCursorModifier": "ctrlCmd",
        "editor.formatOnPaste": true,
        // 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
        "editor.snippetSuggestions": "top",
        "workbench.iconTheme": "vscode-great-icons",
        "workbench.colorTheme": "One Dark Pro Vivid",
        "workbench.startupEditor": "newUntitledFile",
        "html.suggest.angular1": false,
        "html.suggest.ionic": false,
        "files.trimTrailingWhitespace": true,
        // vetur插件格式化使用beautify内置规则
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // VScode 文件搜索区域配置
        "search.exclude": {
            "**/dist": true,
            "**/build": true,
            "**/elehukouben": true,
            "**/.git": true,
            "**/.gitignore": true,
            "**/.svn": true,
            "**/.DS_Store": true,
            "**/.idea": true,
            "**/.vscode": false,
            "**/yarn.lock": true,
            "**/tmp": true
        },
        // 排除文件搜索区域,比如node_modules(贴心的默认设置已经屏蔽了)
        "files.exclude": {
            "**/.idea": true,
            "**/yarn.lock": true,
            "**/tmp": true
        },
        // 配置文件关联,以便启用对应的智能提示,比如wxss使用css
        "files.associations": {
            "*.vue": "vue",
            "*.wxss": "css"
        },
        // 配置emmet是否启用tab展开缩写
        "emmet.triggerExpansionOnTab": true,
        // 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
        "emmet.syntaxProfiles": {
            "vue-html": "html",
            "vue": "html",
            "javascript": "javascriptreact",
            // xml类型文件默认都是单引号,开启对非单引号的emmet识别
            "xml": {
                "attr_quotes": "single"
            }
        },
        // 在react的jsx中添加对emmet的支持
        "emmet.includeLanguages": {
            "jsx-sublime-babel-tags": "javascriptreact"
        },
        // 是否开启eslint检测
        "eslint.enable": false,
        // 文件保存时,是否自动根据eslint进行格式化
        "eslint.autoFixOnSave": false,
        // eslint配置文件
        "eslint.options": {
            "plugins": [
                "html",
                "javascript",
                {
                    "language": "vue",
                    "autoFix": true
                },
                "vue"
            ]
        },
        // eslint能够识别的文件后缀类型
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            "html",
            "vue",
            "typescript",
            "typescriptreact"
        ],
        // 快捷键方案,使用sublime的一套快捷键
        "sublimeTextKeymap.promptV3Features": true,
        // 格式化快捷键 shirt+alt+F
        // prettier进行格式化时是否安装eslint配置去执行,建议false
        "prettier.eslintIntegration": true,
        // 如果为true,将使用单引号而不是双引号
        "prettier.singleQuote": true,
        // 细节,配置gitlen中git提交历史记录的信息显示情况
        "gitlens.advanced.messages": {
            "suppressCommitHasNoPreviousCommitWarning": false,
            "suppressCommitNotFoundWarning": false,
            "suppressFileNotUnderSourceControlWarning": false,
            "suppressGitVersionWarning": false,
            "suppressLineUncommittedWarning": false,
            "suppressNoRepositoryWarning": false,
            "suppressResultsExplorerNotice": false,
            "suppressUpdateNotice": true,
            "suppressWelcomeNotice": false
        },
        // 开启apicloud在vscode中的wifi真机同步
        "apicloud.port": "23450",
        // 设置apicloud在vscode中的wifi真机同步根目录
        "apicloud.subdirectories": "/apiclouduser",
        // git是否启用自动拉取
        "git.autofetch": true,
    }
    

      

    用户代码片段

    打开文件 > 首选项 > 用户代码片段 >(搜索代码语言)

    HTML片段

    {
        "ss": {
            "prefix": "ss",
            "body": [
                "<script src="$1"></script>"
            ],
            "description": "<script src="..."></script>"
        },
        "html5": {
            "prefix": "html5",
            "body": [
                "<!DOCTYPE html>",
                "<html lang="zh-CN">",
                "",
                "<head>",
                "  <meta charset="UTF-8">",
                "  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">",
                "  <meta http-equiv="X-UA-Compatible" content="ie=edge">",
                "  <title>${1:Document}</title>",
                "</head>",
                "",
                "<body>",
                "  $2",
                "</body>",
                "",
                "</html>"
            ],
            "description": "HTML5"
        }
    }

    JavaScript / JavaScript React

    {
        "cl": {
            "prefix": "cl",
            "body": [
                "console.log($1)"
            ],
            "description": "console.log('')"
        },
        "dg": {
            "prefix": "dg",
            "body": [
                "document.getElementById($1)"
            ],
            "description": "document.getElementById(id)"
        },
        "jsdoc": {
            "prefix": "__",
            "body": [
                "/**",
                " * $1",
                " */"
            ],
            "description": "/** */"
        }
    }

    插件(主要开发React)

    提示:VS Code自带有代码格式化功能,可以格式化HTML、CSS、JavaScript、JSON文件,格式JSX文件时需要设置缩进方式为空格·

    Auto Close Tag (自动关闭HTML标签)
    Auto Rename Tag (HTML标签自动改名)
    Babel ES6/ES7 
    Beautify css/sass/scss/less
    Brackets Light (主题)
    Complete JSDoc Tags (js文档注释提示)
    Git History (查看git提交记录)
    HTML CSS Support (HTML中提示可用的class)
    npm Intellisense (提示可以require的模块名称)
    One Dark Theme (主题)
    Path Intellisense (路径补全)
    Reactjs code snippets (reactjs代码提示)
    Sass
    SCSS IntelliSense
    Sublime Babel
    VSCode Great Icons (文件图标)
    vscode-icons (文件图标)

    主题、文件图标推荐

    • 主题我用的是:Brackets Light (个人喜欢亮色)
    • 文件图标我用的是:VSCode Great Icons 
     
  • 相关阅读:
    字节码编程,Javassist篇四《通过字节码插桩监控方法采集运行时入参出参和异常信息》
    字节码编程,Javassist篇三《使用Javassist在运行时重新加载类「替换原方法输出不一样的结果」》
    字节码编程,Javassist篇二《定义属性以及创建方法时多种入参和出参类型的使用》
    字节码编程,Javassist篇一《基于javassist的第一个案例helloworld》
    CPU瞒着内存竟干出这种事
    可怕!CPU竟成了黑客的帮凶!
    完了!CPU一味求快出事儿了!
    如果平行宇宙也有编程语言
    你离黑客的距离,就差这20个神器了
    哈希表哪家强?几大编程语言吵起来了!
  • 原文地址:https://www.cnblogs.com/suzhen-2012/p/6750157.html
Copyright © 2011-2022 走看看