前端開發 VS Code 上手使用

前端開發 VSCode · 發表 2019-03-10 02:05:08

摘要：如果想配置 sublime 開發工具 => 面向web前端及node開發人員的vim配置如果想配置 vim 開發工具 => sublime配置及使用技巧所謂網紅編輯器，我覺得比vim來的更爽，因為vim的所有操作和外掛，對於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

前端開發 VS Code 上手使用

您可能也會喜歡…