VS Code插件推荐（前端开发）

Visual Studio Code (推荐)

Visual Studio Code（以下简称vscode）是一个轻量且强大的代码编辑器，支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持C++、C#、Python、PHP等其他语言。

下载地址

Visual Studio Code

推荐插件

• open in browser 右键可选择浏览器打开文件
• Auto Close Tag 自动闭合标签
• Auto Rename Tag 修改标签名，首位标签名自动同步
• Beautify 代码美化
• Color Picker 取色器
• ESLint 代码规范检查工具
• Quick Task 展示任务列表，以快速选择执行
• Vetur 开发vue必备，集成多种工具
• vscode-icons 文件图标
• Import Cost 显示引入文件大小
• Document This 注释文档生成器
• jQuery Snippets jQuery代码片段提示
• NPM-scripts npm脚本快捷工具
• Chinese (Simplified) Language Pak for Visual Studio Code 汉化（简体）

推荐配置 setting.json

{
    "workbench.iconTheme": "vscode-icons",
    "files.autoSave": "onFocusChange",
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript", //  用eslint的规则检测js文件
        {
            "language": "vue", // 检测vue文件
            "autoFix": true //  为vue文件开启保存自动修复的功能
        },
        // {
        //     "language": "html",
        //     "autoFix": true
        // },
    ],
    "eslint.options": {
        "configFile": ".eslintrc.js"
    },
    "docthis.includeAuthorTag": true,
    "docthis.includeDescriptionTag": true,
    "docthis.inferTypesFromNames": true,
    "docthis.enableHungarianNotationEvaluation": true,
    "docthis.authorName": "LeaFish <[email protected]>",
    "docthis.includeDateTag": true,
    "window.zoomLevel": 0,
    "workbench.colorCustomizations": {
        "activityBarBadge.background": "#00BCD4",
        "list.activeSelectionForeground": "#00BCD4",
        "list.inactiveSelectionForeground": "#00BCD4",
        "list.highlightForeground": "#00BCD4",
        "scrollbarSlider.activeBackground": "#00BCD450",
        "editorSuggestWidget.highlightForeground": "#00BCD4",
        "textLink.foreground": "#00BCD4",
        "progressBar.background": "#00BCD4",
        "pickerGroup.foreground": "#00BCD4",
        "tab.activeBorder": "#00BCD4",
        "notificationLink.foreground": "#00BCD4",
        "editorWidget.resizeBorder": "#00BCD4",
        "editorWidget.border": "#00BCD4",
        "settings.modifiedItemIndicator": "#00BCD4",
        "settings.headerForeground": "#00BCD4",
        "panelTitle.activeBorder": "#00BCD4",
        "breadcrumb.activeSelectionForeground": "#00BCD4",
        "menu.selectionForeground": "#00BCD4",
        "menubar.selectionForeground": "#00BCD4"
    },
    "materialTheme.accent": "Cyan",
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss",
            "less"
        ],
        "html": [
            "htm",
            "html",
        ]
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.tabSize": 2,
    "explorer.confirmDelete": false,
}