前端开发 VS Code 上手使用

如果想配置 sublime 开发工具 => sublime配置及使用技巧

如果想配置 vim 开发工具 => 面向web前端及node开发人员的vim配置

所谓网红编辑器，我觉得比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 转 pdf
• Markdown TOC: markdown 目录生成
• Markdown+Math: markdown 中数学公式支持
• vscode-pdf: pdf 阅读插件

编辑器本身的插件

• seti-icons: 文件icon
• Theme - Seti-Monokai: 高亮及编辑器外观
• Sublime Text Keymap and Settings Importer: sublime 功能键及配置映射
• Sublime Babel: sublime
• vscode-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"
        ]