个人 VS code 使用总结

个人常用插件标配

1、开发效率类 —— 必备

• ESLint
• Auto Close Tag
• Auto Import
• Auto Rename Tag
• HTML Boilerplate
• Prettier - code formatter

2、开发效率类 —— 可选

• ES7 React/Redux/GraphQL/React-Native snippets
• CSS Modules
• CSS Peek
• Sass
• Node modules resolve 解决点击 import 省略了文件名的文件跳转问题
• PlantUML 画流程图
• markdownlint

3、开发工具类

• Debugger for Chrome
• Git History
• Settings Sync 配置同步插件

4、代码优化类

• Import Cost 显示 import 文件的大小
• CodeMetrics 计算代码复杂度

配置文件

1、jsconfig.json

这个文件非常有用，具体可以自行 google。例如使用 webpack 别名以后编辑器不能根据别名路径跳转，这个时候配置 paths 属性就能解决这个问题。文件格式类似以下：

{
    "compilerOptions": {
        "target": "es2015",
        "jsx": "react",
        "allowSyntheticDefaultImports": false,
        "experimentalDecorators": true,
        "baseUrl": "./",
        "paths": {
            "components/*": [
                "client/components/*",
            ],
            "images/*": [
                "client/images/*"
            ],
            "common/*": [
                "client/common/*",
            ],
            "utils/*": [
                "client/utils/*"
            ],
        }
    },
    "exclude": [
        "node_modules", "public", "server"
    ]
}

2、我的设置

{
    "files.autoSave": "onFocusChange",
    "eslint.enable": true,
    "explorer.confirmDelete": false,
    "workbench.colorTheme": "Default High Contrast",
    "workbench.iconTheme": "vscode-icons",
    "python.linting.flake8Enabled": false,
    "python.linting.pylintEnabled": false,
    "window.zoomLevel": 0,
    "editor.tabSize": 2,
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.minimap.enabled": false,
    "less.scannerExclude": ["**/.git", "**/bower_components"],
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "terminal.integrated.copyOnSelection": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "javascript": "javascriptreact"
    },
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "editor.foldingStrategy": "indentation",
    "editor.autoIndent": false,
    "vsicons.dontShowNewVersionMessage": true,
    "path-intellisense.extensionOnImport": true,
    "path-intellisense.showHiddenFiles": true,
    "editor.fontSize": 14,
    "breadcrumbs.enabled": true,
    "terminal.integrated.fontSize": 14,
    "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
    "eslint.options": {
        "extensions": [".js", ".jsx", ".vue"]
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "eslint.alwaysShowStatus": true,
    "emmet.syntaxProfiles": {
        "javascriptreact": "js",
        "vue": "vue",
        "vue-html": "html"
    },
    "eslint.provideLintTask": true,
    "editor.formatOnSave": true,
    "prettier.singleQuote": true,
    "prettier.arrowParens": "always",
    "prettier.trailingComma": "es5",
    "prettier.eslintIntegration": true
}

有用快捷键

1. cmd + d —— 匹配当前选中的词
2. cmd + k cmd + 0—— 折叠所有代码
3. cmd + Shift + L—— 同时编辑多行
4. cmd + P—— 搜索文件，或者输入>可以执行各种命令