前端开辟 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 转 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 上手运用》

《前端开辟 VS Code 上手运用》

关于一些不如意的处所,能够在设置文件中举行设置,个人觉得 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

    原文作者:Faremax
    原文地址: https://segmentfault.com/a/1190000018447996
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞