VSCode提高 Node 和 Vue 開發效率的插件推薦_相關技巧

來源:腳本之家  責任編輯:小易  

1.智能感知vscode使用DefinitelyTyped進行自動完成所以需要先安裝tsd,命令:npm install -g tsd安裝完成后,首先安裝node基本語法支持tsd query node --action install然后根據使用的e5a48de588b67a686964616f31333339666662modules安裝,相應的支持,例如express的tsd query express --action install具體的包可以到這里查詢:http://definitelytyped.org/tsd/安裝完畢后會在項目的目錄中新建typings目錄,里面保存相應的包。2.啟動項目vscode會根據launch.json來進行項目的啟動,通過launch.json配置,不僅可以進行nodejs的項目啟動,還可以進行其他代碼的啟動,包括php等,php的我會在下篇文章介紹,這里需要注意的是launch.json,是存放在.vscode目錄內的不要搞錯。3.代碼調試首先要點擊vscode右側的debug標簽,找不到的按ctrl-shift-E,或者直接按F5,啟動調試,這樣就可一開始調試跟蹤了。編輯器的右側會有debug的console可以查看輸出,左側的變量監控做的也非常不錯。最后小技巧:快速打開項目由于vscode沒有項目的sln文件,所打開項目比較麻煩(其實不麻煩,我比較懶),這里介紹一個簡單的方法新建一個bat文件start-ide.bat(名字不要與系統命令重復例如cmd,start,否則就無限循環了),內容如下:start code .這樣點擊這個bat文件會打開2個窗口,一個目錄是項目根目錄的cmd窗口可以方便的輸入命令、一個打開項目根目錄的vscode的編輯器,這樣就可以愉快的開始玩耍了。另外:mongo-express管理mongodb還不錯,找不到好的管理工具的可以試試www.13333515.buzz防采集請勿采集本網。

在眾多代碼編輯工具中,我最喜歡的就是微軟的vscode。首先它十分輕便,不吃硬件,運行非常順暢;其次是其各種各樣的插件使得編程效率蹭蹭地往上提,爸爸媽媽再也不用擔心我要加班了(才怪!!!不加班是不可能的)

1.雙擊打開vscode 2.找到底層面板 把ctrl改成LF 3.打開文件夾,建立項目test 4.新建hellow.js

插件列表

一、使用Express此配置表示代碼服從ES5標準并使用commonjs規范,發VScode下有此配置之后,可以實現在文件中對require引用js文件的智能提示。(我測試時無此配置也會有智能提示,不清楚什么原因)

Auto Close Tag 自動閉合HTML標簽

當然是對于Nodejs IDE的集成開發環境,集項目創建、編輯、調試于一體,簡單的配置,百強度大的智能提示。因為前面說過我一直做.net開發,剛好微軟在2016年推出了vs code 一款輕量級的文本編輯器

Auto Rename Tag 修改HTML標簽時,自動修改匹配的標簽

本文的前提是你已經安裝了vs code代碼編輯器和nodejs環境,如果沒有安裝,請自行下載安裝!一、使用Express創建項目[這兩步都在dos 模式下執行] 1,安裝全局的Express!(已安裝請忽略) 1234 npm

Bookmarks 添加行書簽

從data-filename讀取記錄,v1,1-5個字符數值,v2-v18單個數值,v19 4位數值,v20一個字符,v21一個數值,label是變量的另一個名字,便于顯示。可以正常讀入,但不清楚你的需求是什么。

Can I Use HTML5、CSS3、SVG的瀏覽器兼容性檢查

Code Runner 運行選中代碼段(支持大量語言,包括Node)

CodeBing 在VSCode中彈出瀏覽器并搜索,可編輯搜索引擎

Color Highlight 顏色值在代碼中高亮顯示

Color Picker 拾色器

Document This 注釋文檔生成

EditorConfig for VS Code EditorConfig 插件

Emoji 在代碼中輸入emoji

ESLint ESLint插件,高亮提示

File Peek 根據路徑字符串,快速定位到文件

Font-awesome codes for html FontAwesome提示代碼段

ftp-sync 同步文件到ftp

Git Blame 在狀態欄顯示當前行的Git信息

Git History(git log) 查看git log

GitLens 顯示文件最近的commit和作者,顯示當前行commit信息

Guides 高亮縮進基準線

Gulp Snippets Gulp代碼段

HTML CSS Class Completion CSS class提示

HTML CSS Support css提示(支持vue)

HTMLHint HTML格式提示

Indenticator 縮進高亮

JavaScript (ES6) code snippets ES6語法代碼段

language-stylus Stylus語法高亮和提示

Lodash Lodash代碼段

markdownlint Markdown格式提示

MochaSnippets Mocha代碼段

Node modules resolve 快速導航到Node模塊

npm 運行npm命令

npm Intellisense 導入模塊時,提示已安裝模塊名稱

Output Colorizer 彩色輸出信息

Partial Diff 對比兩段代碼或文件

Path Autocomplete 路徑完成提示

Path Intellisense 另一個路徑完成提示

Prettify JSON 格式化JSON

Project Manager 快速切換項目

REST Client 發送REST風格的HTTP請求

Settings Sync VSCode設置同步到Gist

String Manipulation 字符串轉換處理(駝峰、大寫開頭、下劃線等等)

Test Spec Generator 測試用例生成(支持chai、should、jasmine)

TODO Parser Todo管理

Version Lens package.json文件顯示模塊當前版本和最新版本

vetur 目前比較好的Vue語法高亮

View Node Package 快速打開選中模塊的主頁和代碼倉庫

vscode-icons 文件圖標,方便定位文件

VSCode Great Icons 文件圖標拓展

VueHelper Vue2代碼段(包括Vue2 api、vue-router2、vuex2)

附錄:VSCode首選項配置

{"editor.tabSize": 2,"files.associations": {"*.vue": "vue"},"eslint.autoFixOnSave": true,"eslint.options": {"extensions": [".js",".vue"]},"eslint.validate": ["javascript","javascriptreact","vue","vue-html"],"search.exclude": {"**/node_modules": true,"**/bower_components": true,"**/dist": true},"emmet.syntaxProfiles": {"javascript": "jsx","vue": "html","vue-html": "html"},"extensions.autoUpdate": true,"editor.renderWhitespace": "boundary","editor.cursorBlinking": "smooth","workbench.welcome.enabled": true}

到此這篇關于VSCode提高 Node 和 Vue 開發效率的插件推薦的文章就介紹到這了,更多相關VSCode插件推薦內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持真格學網!

aunch.json 配置如下{name":"附加",type":"node",request":"attach",port":8080,address":"localhost",restart":false,sourceMaps":false,outDir":null,localRoot":"${workspac內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • vscode插件開發之插件初步通信的方法步驟
  • vscode插件整理(小結)
  • 詳解vscode中vue代碼顏色插件
  • vscode安裝使用教程和插件安裝方法
  • vscode下好用的python插件及配置
  • 推薦vscode 上特別好用的 vue 插件之vetur
  • vscode常用插件整理匯總
  • vscode 遠程調試python的方法
  • 微信 小程序開發環境搭建詳細介紹
  • 使用vscode寫一個html頁面
  • vscode怎么編譯運行
  • 水晶報表 分頁 的問題
  • git 教程之查看提交歷史詳解
  • git下載與環境變量配置方法
  • 計算機中的字符串編碼、亂碼、bom等問題詳解
  • 淺談解決360兼容模式瀏覽器的方法
  • 鍵盤掃描碼[比較完整]
  • 提高編程技能的11個建議
  • 如何在vs code使用node
  • vscode中node.js開發和擴展開發的區別
  • 關于VScode調試Java出現在path中找不到node和classpath不完整怎么解決?
  • 為什么vscode調試node一直報這個錯
  • 如何用VsCode調試node
  • 如何在vscode中使用nodejs
  • 為什么在visual studio code中的終端中不能用node執行命令
  • vscode 用安裝node插件嗎
  • 怎么用sas code node
  • 我使用vscode寫node.js代碼,出現如下問題,請問如何處理?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁相關技巧vscode插件開發之插件初步通信的方法步驟vscode插件整理(小結)詳解vscode中vue代碼顏色插件vscode安裝使用教程和插件安裝方法vscode下好用的python插件及配置推薦vscode 上特別好用的 vue 插件之veturvscode常用插件整理匯總vscode 遠程調試python的方法微信 小程序開發環境搭建詳細介紹使用vscode寫一個html頁面vscode怎么編譯運行水晶報表 分頁 的問題git 教程之查看提交歷史詳解git下載與環境變量配置方法計算機中的字符串編碼、亂碼、bom等問題詳解淺談解決360兼容模式瀏覽器的方法鍵盤掃描碼[比較完整]提高編程技能的11個建議2019最新的pycharm激活碼(推薦)進制轉換算法原理(二進制 八進制eclipse 格式化代碼時不換行與自微信小程序設置http請求的步驟詳幾款開源的中文分詞系統十進制負數轉換為二進制、八進制從console.log說起(console.log詳url 長度有限制嗎?git 撤銷操作、刪除文件和恢復文算法系列15天速成 第四天 五大經典查找【詳解http協議簡介git分支(branch)操作相關命令及分支命令的兩分鐘學會如何在github托管代碼web開發人員常用速查手冊 英文集合推薦風中葉老師講述的學習方法(學習編程的朋友sublime text 添加到鼠標右鍵功能wap開發中如何有效的利用緩存減少消息的傳高性能web開發 為什么要減少請求數,如何alt鍵 chr碼值對應列表查看方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果