前端开发 VS Code 上手使用

如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置如果想配置 vim 开发工具 => sublime配置及使用技巧所谓网红编辑器，我觉得比vim来的更爽，因为vim的所有操作和插件，对于vs code 来说也就是一个插件就能无缝兼容。比如我之前是一直在使用 sublime 的，使用vs code 之后明显感觉 vscode 无论是配置还是使用都更顺手一点，学习成本很小。当然本文不是谈哪个编辑器更好的问题，每个软件都在发展，相互学习和补充才是重点。作为一个前端开发，vs code 开箱即用的代码编辑、高亮、提示都十分友好。但作为一个追求完美的程序员，还是装了不少插件，比如前端开发用的一些插件：Auto Rename Tag: 当你编辑HTML标签是会自动修改配对标签HTML Class Suggestions: HTML class 名称提示ESLint: ES 语法检查Hap Extension: 快应用开发基础支持JavaScript(ES6) code snippets: js 代码片段，提高编码速度open in browser: 在浏览器打开页面，这个已经不常用了，但对于前端初学者还是很友好的QuickApp For Highlighter: 快应用开发高亮Color Info: css 中颜色预览工程化也需要一些插件：npm: npm 管理npm Intellisense: npm 自动配置GitLens: git 记录查看minify: 代码压缩写作办公也需要一些工具呀：Excel Viewer: 实际感觉只能预览 csv 文件，不过这也够用了Markdown PDF: markdown 转 pdfMarkdown TOC: markdown 目录生成Markdown+Math: markdown 中数学公式支持vscode-pdf: pdf 阅读插件编辑器本身的插件seti-icons: 文件iconTheme - Seti-Monokai: 高亮及编辑器外观Sublime Text Keymap and Settings Importer: sublime 功能键及配置映射Sublime Babel: sublimevscode-faker: 随机数据生成其他的一些工具SVG Viewer: SVG 图片预览xtemplate: xtpl 文件高亮支持我安装了sublime 的插件，其实还有vim 的插件，安装后无缝兼容 .vimrc 配置和 vim plugin。正常的快捷键可以看参考下图，其实和 sublime 差不了太多。对于一些不如意的地方，可以在配置文件中进行配置，个人感觉 vs code 配置开放比 sublime 更丰富。{ “beautify.language”: { “js”: { “type”: [ “javascript”, “json” ], “filename”: [ “.jshintrc”, “.jsbeautify” ] }, “css”: [ “css”, “scss”, “less” ], “html”: [ “htm”, “html” ] }, “debug.showInStatusBar”: “always”, “debug.node.autoAttach”: “off”, “beautify.tabSize”: 2, “css.lint.duplicateProperties”: “warning”, “css.lint.idSelector”: “warning”, “css.lint.universalSelector”: “warning”, “css.lint.zeroUnits”: “error”, “less.lint.duplicateProperties”: “warning”, “less.lint.idSelector”: “warning”, “less.lint.universalSelector”: “warning”, “less.lint.zeroUnits”: “error”, “scss.lint.duplicateProperties”: “warning”, “scss.lint.idSelector”: “warning”, “scss.lint.universalSelector”: “warning”, “scss.lint.zeroUnits”: “error”, “csv-preview.skipComments”: true, “csv-preview.lineNumbers”: true, “editor.formatOnPaste”: true, “editor.find.autoFindInSelection”: true, “editor.formatOnSave”: true, “editor.fontSize”: 14, “editor.formatOnType”: true, “editor.multiCursorModifier”: “ctrlCmd”, “editor.minimap.enabled”: false, “editor.snippetSuggestions”: “top”, “editor.tabSize”: 2, “editor.wordSeparators”: “`~!@#$%^&()=+[{]}\|;:’",.<>/?”, “emmet.includeLanguages”: { “vue-html”: “html”, “javascript”: “javascriptreact” }, “emmet.triggerExpansionOnTab”: true, “emmet.showAbbreviationSuggestions”: false, “eslint.autoFixOnSave”: true, “eslint.options”: { “configFile”: “/Users/faremax/eslintrc.json” }, “eslint.run”: “onSave”, “eslint.workingDirectories”: [ “./public”, “./src” ], “explorer.confirmDelete”: false, “explorer.confirmDragAndDrop”: false, “explorer.openEditors.visible”: 4, “files.associations”: { “.ux”: “ux” }, “files.autoSave”: “onFocusChange”, “files.exclude”: { “/.git”: true, “/.svn”: true, “/.hg”: true, “/CVS”: true, “/.DS_Store”: true, “/node_modules”: true }, “files.insertFinalNewline”: true, “files.trimFinalNewlines”: true, “files.trimTrailingWhitespace”: true, “git.detectSubmodules”: false, “gulp.autoDetect”: “off”, “grunt.autoDetect”: “off”, “html.format.wrapLineLength”: 0, “jake.autoDetect”: “off”, “javascript.implicitProjectConfig.experimentalDecorators”: true, “markdown-pdf.displayHeaderFooter”: false, “markdown-pdf.margin.left”: “1.8cm”, “markdown-pdf.margin.right”: “1.8cm”, “markdown-pdf.margin.top”: “1cm”, “markdown.preview.lineHeight”: 1.5, “markdown.styles”: [ “/Users/faremax/github-markdown.css” ], “markdown-pdf.styles”: [ “/Users/faremax/github-markdown.css” ], “markdown-toc.insertAnchor”: true, “open-in-browser.default”: “Google Chrome.app”, “search.exclude”: { “/node_modules”: true, “/bower_components”: true, “/build”: true, “/dist”: true, }, “search.location”: “sidebar”, “svgviewer.enableautopreview”: true, “terminal.explorerKind”: “integrated”, “window.restoreWindows”: “all”, “workbench.statusBar.feedback.visible”: false, “window.zoomLevel”: 0, “workbench.colorTheme”: “Monokai”, “workbench.startupEditor”: “newUntitledFile”}vs code 还有很多实用技巧，可以看官方github: https://github.com/Microsoft/vscode