vsCode常用插件与配置

插件

1. Auto Close Tag 自动闭合HTML/XML标签
2. Auto Rename Tag 自动完成另一侧标签的同步修改
3. Bracket Pair Colorizer 给括号加上不同的颜色
4. Chinese (Simplified) Language Pack for Visual Studio Code 汉化
5. Prettier 格式化JavaScript / TypeScript / CSS
6. ESLint js语法纠错
7. Path Intellisense 自动提示文件路径，支持各种快速引入文件
8. npm Intellisense 自动完成导入语句中的 npm 模块
9. GitLens — Git supercharged 方便查看git日志
10. Babel JavaScript 语法高亮
11. Vetur Vue多功能集成插件
12. Vue 2 Snippets vue 2代码片段
13. Vue TypeScript Snippets vue的 typescript 代码片段
14. JavaScript (ES6) code snippets ES6语法中的JavaScript 代码片段扩展
15. ES7 React/Redux/GraphQL/React-Native snippets ES7语法代码片段扩展（例：imp→ import moduleName from ‘module’）
16. React Native Tools React Native 的调试和集成命令
17. React-Native/React/Redux snippets for es6/es7 React/Redux/react-router语法智能提示
18. Reactjs code snippets ES6 语法开发 Reactjs 智能提示
19. Material Icon Theme vscode图标主题
20. One Dark Pro One Dark 代码主题，黑暗风
21. filesize 在状态栏中显示当前文件大小
22. HTML CSS Support 智能提示CSS类名以及id
23. HTML Snippets 智能提示HTML标签，以及标签含义

用户配置

{
    "files.autoSave": "onFocusChange", // 控制何时自动保存已更新文件
    "window.zoomLevel": 1, // 调整窗口的缩放级别
    "update.channel": "none", // 配置是否从更新通道接收自动更新。更改后需要重启
    "eslint.autoFixOnSave": true, // 配置保存代码时按照elint规则格式化
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "jsx",
        {
            "language": "html",
            "autoFix": true,
        },
        {
            "language": "vue",
            "autoFix": true,
        }
    ],
    "terminal.integrated.rendererType": "dom",
    "emmet.triggerExpansionOnTab": false,
    "workbench.colorTheme": "One Dark Pro",
    "editor.tabSize": 2,
    "editor.formatOnType": true,
    "editor.formatOnSave": true, // 每次保存的时候自动格式化 
    "javascript.updateImportsOnFileMove.enabled": "always",
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "npm.enableScriptExplorer": true,
    "[typescript]": {
        "breadcrumbs.showArrays": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "workbench.iconTheme": "material-icon-theme",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
}