前端開發 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 配置開放比 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