10个好用的VisualStudioCode插件“神器”插图

浣滆€呬辅Daan

璇戣€?| 澶忓

绛栧垝 | 涓囦匠

鏃犺浣犳槸缁忛獙涓板瘜鐨勭▼搴忓憳锛岃繕鏄垰寮€濮嬩粠浜嬬涓€浠藉伐浣滅殑绋嬪簭鍛樺皬鐧斤紝浣犻兘鎯宠绋嬪簭寮€鍙戝彉寰楁洿瀹规槗銆備娇鐢ㄦ纭殑宸ュ叿锛屼綘灏辫兘澶熷仛鍒拌繖鐐广€?br>

濡傛灉浣犳鍦ㄤ娇鐢ㄧ殑 IDE 鏄?Visual Studio Code锛岄偅鍙互璁╁畠鍙樺緱鏇村悎浣犵殑鍙e懗銆傚叾涓竴涓柟寮忓氨鏄畨瑁呮纭殑鎻掍欢銆備綘鍙互灏藉彲鑳藉鍦板畨瑁呮彃浠讹紝浠庤€岃缂栫▼鍙樺緱鏇村鏄撱€?/p>

鏃犵枒锛屾彃浠跺浣犵殑宸ヤ綔鏁堢巼鍜屽伐浣滄柟寮忔湁鐫€寰堝ぇ褰卞搷銆傝繖灏辨槸涓轰粈涔堟垜浠帴涓嬫潵浼氱湅鐪?Visual Studio Code 鐨勬彃浠舵竻鍗曘€?/p>

鎴戜滑鏀瑰彉宸ュ叿锛屼箣鍚庯紝宸ュ叿涔熶細鏀瑰彉鎴戜滑銆?/span>鈥斺€擩eff Bezos

娉ㄦ剰锛?/strong>鎵€鏈夎繖浜涙彃浠堕兘鍙互鍦?Visual Studio Marketplace 涓婇潰鍏嶈垂鑾峰彇銆?/strong>


1.Visual Studio Intellicode

Visual Studio Intellicode 鏈夌潃 320 涓囦笅杞介噺锛屾槸 Visual Studio 涓婁笅杞芥鏁版渶澶氱殑鎻掍欢銆傚苟涓旓紝鍦ㄦ垜鐪嬫潵锛屽畠浼氭槸浣犵敤杩囩殑鏈€鏈夌敤鐨勬彃浠朵箣涓€銆?/p>

杩欎釜鎻掍欢鑳藉府鍔╁紑鍙戜汉鍛樼敓鎴愭櫤鑳戒唬鐮佽ˉ鍏ㄦ彁绀猴紝骞朵笖瀹冨唴缃敮鎸佸緢澶氱缂栫▼璇█銆?/strong>

10个好用的VisualStudioCode插件“神器”插图1

Visual Studio Intellicode 浣跨敤鏈哄櫒瀛︿範鎶€鏈紝閫氳繃瀛︿範澶ч噺 GitHub 椤圭洰鐨勪唬鐮侊紝鑳芥壘鍒颁竴浜涚紪鐮佹ā寮忥紝鐒跺悗鍦ㄤ綘缂栫▼鏃剁粰浜堜唬鐮佹彁绀恒€?/p>


2.Git Blame

璋佸啓鐨勮繖娈典唬鐮侊紵

姣忛殧涓€娈垫椂闂达紝浣犻兘鍙兘闇€瑕佷簡瑙f煇娈典唬鐮佹槸璋佸啓鐨勩€傛濂斤紝Git Blame 灏卞彲浠ュ府浣犮€侴it Blame 浼氬憡璇変綘鏈€鍚庝慨鏀硅繖琛屼唬鐮佺殑浜烘槸璋併€?strong>鏈€閲嶈鐨勬槸锛屼綘鍙互鐪嬪埌杩欏淇敼鍙戠敓鍦ㄥ摢娆℃彁浜ら噷銆?/strong>

杩欎釜淇℃伅寰堟湁鐢紝鐗瑰埆鏄綋浣犲湪鏌愪釜浜у搧鍔熻兘鍒嗘敮涓婂紑鍙戞椂灏ゅ叾鏈夌敤銆傚綋浣跨敤浜у搧鍔熻兘鍒嗘敮寮€鍙戞椂锛屼綘閫氳繃鐐瑰嚮浠ヤ綘鍒嗘敮鍚嶅懡鍚嶇殑鏍囩锛屽氨鍙互璺冲埌鐩稿簲淇℃伅銆?/p>

10个好用的VisualStudioCode插件“神器”插图2

鐢变簬 Git Blame 浼氬憡璇変綘杩欒浠g爜鏄湪鍝釜鎻愪氦鍜屽摢涓垎鏀笂淇敼鐨勶紝鎵€浠ヤ綘灏辩煡閬撲簡鍝釜鏍囩瀵瑰簲鐫€杩欐淇敼銆傝繖灏嗗府鍔╀綘鏇村ソ鍦扮悊瑙h繖绉嶄慨鏀硅儗鍚庣殑閫昏緫銆?/p>


3.Prettier

瀵归偅浜涙兂涓ユ牸閬靛畧涓€缁勭紪鐮佽鍒欐牸寮忕殑寮€鍙戣€呮潵璇达紝Prettier 鏄浉褰撴湁鐢ㄧ殑鎻掍欢銆傚畠鏄竴涓緢鏈夊惛寮曞姏鐨勬彃浠讹紝鍏佽浣犱娇鐢?Prettier 寮€鍙戝寘銆?/p>

骞朵笖锛屽畠鏄竴涓仴澹殑銆佸浐瀹堟垚瑙勭殑浠g爜鏍煎紡鍖栧埄鍣紝鍏佽寮€鍙戣€呭皢浠栦滑鐨勪唬鐮佽繘琛屾牸寮忓寲銆?/strong>


4.JavaScript锛圗S6锛?Code Snippets

姣忎竴涓柊娼殑 Web 寮€鍙戣€呭簲璇ラ兘澶ф鐜囦娇鐢ㄨ繃涓嶅悓绫诲埆鐨?JavaScript 杞欢鏍堥儴鍒嗐€備笉绠′綘閫夋嫨浜嗕粈涔?JavaScript 妗嗘灦锛屽湪涓嶅悓鐨勯」鐩腑鐩存帴鐢熸垚鍚屾牱鐨勫熀纭€浠g爜閮藉皢缂╃煭浣犵殑宸ヤ綔娴佺▼銆?/p>

JavaScript锛圗S6锛?Code Snippets 灏辨槸杩欐牱涓€娆句究鍒╂彃浠讹紝瀹冧负寮€鍙戣€呬滑鎻愪緵浜嗕竴浜涙湁鐢ㄧ殑 JavaScript 浠g爜鐗囨銆?/strong>瀹冨皢鏍囧噯鐨?JavaScript 鍑芥暟璋冪敤缁戝畾鍒扮畝鍗曠殑蹇嵎閿笂銆備竴鏃︿綘鐔熺粌浣跨敤杩欎釜鎻掍欢锛屽畠灏辫兘鏋佸ぇ鍦版彁楂樹綘鐨勫紑鍙戞晥鐜囥€?/p>


5.Sass

鍙兘浣犲凡缁忕寽鍒颁簡锛岃繖娆炬彃浠跺彲浠ュ府鍔╀娇鐢ㄦ牱寮忚〃鐨勫紑鍙戣€呫€備竴鏃﹀紑濮嬩负搴旂敤绋嬪簭鍒涘缓鏍峰紡琛紝浣犵粷瀵规兂瑕佷娇鐢?Sass 杩欐鎻掍欢銆?strong>杩欐鎻掍欢鏀寔缂╄繘 Sass 璇硶楂樹寒銆佽嚜鍔ㄨˉ鍏ㄥ拰鏍煎紡鍖栥€?/strong>

褰撴秹鍙婂埌鏍峰紡鏃讹紝浣犵粷瀵规兂瑕佸湪浣犵殑宸ュ叿搴撲腑鍔犲叆杩欎釜宸ュ叿銆?/p>


6.Path Intellisense

Path Intellisense 鍙互蹇€熸彁楂樹綘鐨勫紑鍙戞晥鐜囥€傚鏋滀綘鍚屾椂寮€鍙戝涓」鐩紝骞朵娇鐢ㄥ緢澶氫笉鍚岀殑鎶€鏈紝浣犺偗瀹氭兂瑕佷竴涓柟渚跨殑宸ュ叿锛?strong>瀹冭兘甯綘璁颁綇鏂囦欢璺緞銆?/strong>

杩欐鎻掍欢灏辫兘涓轰綘鑺傜渷寰堝杩欐柟闈㈢殑鏃堕棿锛屽府浣犵渷鍘绘壘鍒版纭枃浠惰矾寰勭殑鏃堕棿銆?/p>


7.Debbuger for Chrome

濡傛灉浣犳兂璋冭瘯 JavaScript 绋嬪簭锛屼綘鍙互涓嶅繀绂诲紑 Visual Studio Code 寮€鍙戠幆澧冦€?/p>

10个好用的VisualStudioCode插件“神器”插图3

Debugger for Chrome 杩欐鎻掍欢灏卞彲浠ュ仛鍒拌繖鐐癸紝瀹冪敱寰蒋鍙戝竷锛?strong>鍏佽浣犲湪 Visual Studio Code 涓洿鎺ヨ皟璇曠綉椤垫簮鏂囦欢銆?/strong>


8.ESLint

ESLint 鎻掍欢灏?ESLint 闆嗘垚杩涗簡 Visual Studio Code 涓€傚鏋滀綘杩樹笉浜嗚В杩欐鎻掍欢锛屾垜绠€鍗曡涓€涓嬶紝杩欐鎻掍欢浼氶潤鎬佸垎鏋愪綘鐨勪唬鐮侊紝蹇€熸壘鍒颁唬鐮佷腑鐨勯棶棰樸€?/strong>

ESLint 鎵惧埌鐨勫ぇ閮ㄥ垎闂閮藉彲浠ョ敱鍏惰嚜鍔ㄤ慨澶嶃€侲SLint 浼氭牴鎹綋鍓嶆枃浠朵娇鐢ㄧ殑璇硶杩涜鑷姩淇锛屾墍浠ュ氨涓嶄細鍍忎紶缁熺殑瀵绘壘 – 鏇挎崲绠楁硶閭f牱浜х敓璇硶閿欒銆?/p>

鏈€閲嶈鐨勬槸锛孍SLint 鏄珮搴﹀彲瀹氬埗鍖栫殑锛?/p>


9.SVG Viewer

SVG Viewer 鎵╁睍鎻掍欢涓哄湪 Visual Studio Code 涓娇鐢?SVG 鍥惧儚鎻愪緵浜嗗ぇ閲忓伐鍏枫€?/p>

10个好用的VisualStudioCode插件“神器”插图4

杩欐鎻掍欢鑳藉湪缂栬緫鍣ㄤ腑娓叉煋 SVG 鏂囦欢锛岃繖鏍峰氨涓嶇敤绂诲紑缂栬緫鍣ㄤ篃鑳界湅鍒?SVG 鍥剧墖鐨勬牱瀛愩€?/p>


10.Themes

鏈€鍚庝竴涓紝涔熷緢閲嶈锛岃繖灏辨槸 Themes 鎻掍欢銆備綘姣忓ぉ閮借闈㈠浣犵殑缂栬緫鍣紝閭d负浠€涔堜笉鎶婂畠瑁呴グ寰楀ソ鐪嬬偣锛?strong>鏈夊ぇ閲忔彃浠惰兘鏀瑰彉棰滆壊鏂规鍜屼晶杈规爮涓婄殑鍥炬爣銆?/strong>

涓€浜涘彈娆㈣繋鐨勫厤璐逛富棰樺寘鎷細One Monokai 銆?One Dark Pro 銆?Material Icon.

10个好用的VisualStudioCode插件“神器”插图5

鐐逛釜鍦ㄧ湅灏戜釜 bug 馃憞