跳到主要內容



新一代的編輯器 — VSCode

俗話說 「工欲善其事,必先利其器」
http://stonetestweb.azurewebsites.net/img.aspx?custid=1&username=public&codetype=QR&EClevel=1&logo=&data=https%3a%2f%2fm.me%2f134276630614160%3fref%3dhello對於工程師來說好的編輯器是很重要的,因為最近剛好很多朋友在問我用什麼編輯器,所以就寫一篇文章來推坑 VSCode XD。

https://m.me/bioasuralee?ref=car

在開始之前先澄清一下,VSCode 跟微軟那套 Visual Studio 一點關係都沒有,而且 VSCode 是完全開源的,社群也非常活絡。

10 個我覺得 VSCode 很強大的地方

1. color picker

看到色碼時不知道顏色,或是寫 css 時不知道去哪裡挑顏色,不用再 google 找色碼表,直接用內建的 color picker 就可以了~




2. Git 整合

還在用git diff看這次到底修改了什麼嗎(本人紅綠色盲看了極度痛苦XD)




快試試 VSCode 的 diff,連行數都幫你對齊好,改了什麼一目了然




3. Emmet

VSCode 內建 Emmet 省下刻 HTML 的時間,慢慢敲 HTML 看起來就很弱阿 XDD




4. 根據檔名或是引用跳到檔案





5. 自定義常用的程式碼片段

我前端寫 React.js 所以很常用到this.setState(() => ({ ... }))




6. 好看的檔案 icon

不同檔案類型有不同 icon,一看就知道是什麼檔案




7. 強大的 intellisense

不管是變數屬性、或是要帶什麼參數都有很好的提示




8. multi cursor

多個游標讓你可以一次修改很多地方




9. 自動 format

不用擔心 code 排版太醜,VSCode 可以自動幫你排版,若團隊有制定 coding style 也可以在 vscode 中設定 eslint




10. debug

可以設斷點 debug,查看目前變數值




社群

除了功能強大之外,VSCode 也有很龐大的社群,有很多擴充功能還有主題可以選,VSCode 本身每個月也會至少更新一次




跟其他編輯器比較

1. Vim

在用 VSCode 之前我有很長一段時間都是用 vim,vim 可以做很多客製化,但缺點就是學習門檻還滿高的,還有記不完的快捷鍵XD,隨著 plugin 越裝越多設定檔也會越來越複雜,雖然如此它仍然是很好的編輯器,搭配 tmux用起來也很順,我目前是寫大專案就用 vscode,寫一些 script 或改改東西就用 vim。
在 vscode 上也有 extension 把 vim shortcut 遷移過來,使用上完全不會有問題。

2. Sublime

我自己只用過一小陣子 sublime,對他的印象就是 package manager 滿方便的,啟動速度也很快,但缺點就是很少更新(聽說最近更新了😱)而且沒有開源,所以有 bug 也沒辦法大家送 PR 一起修。如果要跳槽過來 vscode 的話可以試試 Sublime Text Keymap 這個 extension,雖然我是 vim 派的沒有用過,但評價都還不錯。

3. Atom

我沒用過 Atom,但因為開源又是 Github 出的所以對他印象一直都不錯,之前看過介面也覺得滿漂亮,不過聽說開啟大文件的速度有點慢(不確定有沒有改善),因為我目前 vscode 也用得很好,所以短時間內應該不會去試 atom,如果要從 atom 跳到 vscode 的朋友其實介面滿像的,所以不用太過擔心,而且 vscode 開啟的速度很快XD。

如果你還在各編輯器之間猶豫不決,我真心推薦用用看 vscode,他大概是微軟做過最成功的專案了XD。其實在用 vscode 之前我一直很討厭微軟,什麼 Microsoft ❤️ Linux 一定都是假的XDD,擁抱開源也只是說說而已。雖然我現在還是不太喜歡微軟,不過真的 vscode 真的很好用~

留言

這個網誌中的熱門文章

opencv4nodejs Asynchronous OpenCV 3.x Binding for node.js   122     2715     414   0   0 Author Contributors Repository https://github.com/justadudewhohacks/opencv4nodejs Wiki Page https://github.com/justadudewhohacks/opencv4nodejs/wiki Last Commit Mar. 8, 2019 Created Aug. 20, 2017 opencv4nodejs           By its nature, JavaScript lacks the performance to implement Computer Vision tasks efficiently. Therefore this package brings the performance of the native OpenCV library to your Node.js application. This project targets OpenCV 3 and provides an asynchronous as well as an synchronous API. The ultimate goal of this project is to provide a comprehensive collection of Node.js bindings to the API of OpenCV and the OpenCV-contrib modules. An overview of available bindings can be found in the  API Documentation . Furthermore, contribution is highly appreciated....

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐!作品都在11月24日頒獎典禮進行展示

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐!作品都在11月24日頒獎典禮進行展示 LIS   發表於 2017年11月16日 10:31   收藏此文 2017通訊大賽「聯發科技物聯網開發競賽」決賽於11月4日在台北文創大樓舉行,共有29個隊伍進入決賽,角逐最後的大獎,並於11月24日進行頒獎,現場會有全部進入決賽團隊的展示攤位,總計約為100個,各種創意作品琳琅滿目,非常值得一看,這次錯過就要等一年。 「聯發科技物聯網開發競賽」決賽持續一整天,每個團隊都有15分鐘面對評審團做簡報與展示,並接受評審們的詢問。在所有團隊完成簡報與展示後,主辦單位便統計所有評審的分數,並由評審們進行審慎的討論,決定冠亞季軍及其他各獎項得主,結果將於11月24日的「2017通訊大賽頒獎典禮暨成果展」現場公佈並頒獎。 在「2017通訊大賽頒獎典禮暨成果展」現場,所有入圍決賽的團隊會設置攤位,總計約為100個,展示他們辛苦研發並實作的作品,無論是想觀摩別人的成品、了解物聯網應用有那些新的創意、尋找投資標的、尋找人才、尋求合作機會或是單純有興趣,都很適合花點時間到現場看看。 頒獎典禮暨成果展資訊如下: 日期:2017年11月24日(星期五) 地點:中油大樓國光廳(台北市信義區松仁路3號) 我要報名參加「2017通訊大賽頒獎典禮暨成果展」>>> 在參加「2017通訊大賽頒獎典禮暨成果展」之前,可以先在本文觀看各團隊的作品介紹。 決賽29強團隊如下: 長者安全救星 可隨意描繪或書寫之電子筆記系統 微觀天下 體適能訓練管理裝置 肌少症之行走速率檢測系統 Sugar Robot 賽亞人的飛機維修輔助器 iTemp你的溫度個人化管家 語音行動冰箱 MR模擬飛行 智慧防盜自行車 跨平台X-Y視覺馬達控制 Ironmet 菸消雲散 無人小艇 (Mini-USV) 救OK-緊急救援小幫手 穿戴式長照輔助系統 應用於教育之模組機器人教具 這味兒很台味 Aquarium Hub 發展遲緩兒童之擴增實境學習系統 蚊房四寶 車輛相控陣列聲納環境偵測系統 戶外團隊運動管理裝置 懷舊治療數位桌曆 SeeM智能眼罩 觸...

HTTP headers設置,讓網站更安全避免淪為挖礦機

https://meet.bnext.com.tw/articles/view/42595?utm_campaign=5741400&utm_source=SendPulse&utm_medium=push HTTP headers設置,讓網站更安全避免淪為挖礦機 梅干 2018/04/17 最近一位工程師好友,突然丟一個檢測平台的分數,起初梅干以為是SSL檢測,就進入測試一下,卻發現到,怎分數相當的低,最後研究了一下,原來網站不是有加入SSL憑證就代表安全無誤,就在今年的六月KeyCDN在官方部落格,發表了一篇關於站點HTTP headers配置,分別為X-XSS-Protection、X-Frame-Options、X-Content-Type-Options Content-Security-Policy、Strict-Transport-Security、Public-Key-Pins這六項進行安全的設定,讓網站更加的安全,不會淪為挖礦主機。 而要修正這個HTTP headers的配置,一點也不難,只需將設定參數加入.htaccess文件後,立即就可讓網站更加的安全,並且也可遠離挖礦惡意程式入侵主機,因此身為網站管理員,這個絕不容輕乎,因此也趕快來檢測看看,你的網站是否安全,以及要如何將網站進行修正。 HTTP headers檢測網站 網站名稱: securityheaders.io  網站連結: https://securityheaders.io Step1 首先,開啟.htaccess檔案後,並加入下方的參數設定。 # HTTP security settings start Header set Strict-Transport-Security: max-age=2592000; Header set X-Frame-Options: SAMEORIGIN Header set Referrer-Policy: no-referrer Header set X-XSS-Protection: "1; mode=block" Header set X-Content-Type-Options: nosniff # HTTP security settings end ...