VSCODE前端必备扩展

2,617 阅读2分钟

VSCODE前端必备扩展

Auto Close Tag
Auto Rename Tag
beautify
Bracket Pair Colorizer
Chinese (Simplified) Language Pack for Visual Studio Code
Code Runner
Document This
Drupal Syntax Highlighting
EditorConfig for Visual Studio Code
ESLint
Git History
gitignore 
GitLens 
HTML CSS Support
HTML Snippets
Image Preview
JavaScript (ES6) code snippets
JavaScript Snippet Pack 
language-stylus
Live Server
Manta's Stylus Supremacy
Markdown Preview Enhanced
Open in Browser
Path Intellisense
Prettier
Project Manager
Vetur
vscode-icons
Vue 2 Snippets

扩展配置文件

{
    "explorer.confirmDelete": false,
    // 编辑器配置
    "editor.lineHeight": 24,
    "editor.renderLineHighlight": "none",
    "editor.renderWhitespace": "none",
    // "editor.fontFamily": "Monaco",
    "editor.fontSize": 14,
    "editor.cursorBlinking": "smooth",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnType": false,
    // 图标主题
    "workbench.iconTheme": "vscode-icons",
    // 自动保存
    "files.autoSave": "onFocusChange",
    // 终端配置
    // "terminal.integrated.fontFamily": "monospace",
    "terminal.integrated.fontSize": 14,
    // 为了符合eslint的两个空格间隔原则
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    // 自动补全括号
    "editor.autoClosingBrackets": true,
    "editor.parameterHints": true,
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // 是否允许自定义的snippet片段提示
    "editor.snippetSuggestions": "top",
    "editor.formatOnPaste": false,
    "workbench.startupEditor": "newUntitledFile",
    "html.suggest.angular1": false,
    "html.suggest.ionic": false,
    // 启用后,将在保存文件时剪裁尾随空格。
    "files.trimTrailingWhitespace": true,
    // 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
    },
    // 配置文件关联
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        "xml": {
            "attr_quotes": "single"
        }
    },
    // 在react的jsx中添加对emmet的支持
    "emmet.includeLanguages": {
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    // 是否开启eslint检测
    "eslint.enable": true,
    // 文件保存时,是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": false,
    // eslint配置文件
    "eslint.options": {
        "plugins": [
            "html",
            "javascript",
            {
                "language": "vue",
                "autoFix": true
            },
            "vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html"
    ],
    // 快捷键方案使用sublime的一套快捷键
    "sublimeTextKeymap.promptV3Features": true,
    // 格式化快捷键 shirt+alt+F
    // prettier进行格式化时是否安装eslint配置去执行,建议false
    "prettier.eslintIntegration": false,
    // 如果为true,将使用单引号而不是双引号
    "prettier.singleQuote": true,
    "prettier.semi": false,
    // 配置gitlen中git提交历史记录的信息显示情况
    "gitlens.advanced.messages": {
        "suppressFileNotUnderSourceControlWarning": true,
        "suppressShowKeyBindingsNotice": true,
        "suppressUpdateNotice": true
    },
    // git是否启用自动拉取
    "git.autofetch": true,
    // stylus配置
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    //   "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
    // vetur插件配置
    "vetur.format.defaultFormatterOptions": {
        "wrap_attributes": "force-aligned"
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "html.format.wrapAttributes": "force-aligned",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "gitlens.historyExplorer.enabled": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "beautify.config": {
        "brace_style": "collapse,preserve-inline"
    },
    "git.enableSmartCommit": true,
    "window.zoomLevel": 0,
    "editor.largeFileOptimizations": false,
    "explorer.confirmDragAndDrop": false
  }