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