Re: [問題] Visual Studio Code 入門

看板Programming作者name2name2 (yang~hi)時間8年前 (2016/10/21 01:00)推噓0(0推 0噓 0→)

留言0則, 0人參與討論串2/2 (看更多)

我把最近這段期間有空時摸索的歷程做了一份筆記，不算碰到很多功能僅盡量列出筆記網頁版 http://www.evernote.com/l/AKDvxt1GSNJO8YJnH7NwBxxsWHE-CdAJA4c/ 網頁應該比較好讀之後我有更新內容這裡會自動看到，不過我猜應該不會增加多少內容 ------------- 底下就把筆記內容原文貼上 VSCode 紀錄一下最近使用的一些歷程這算是閒暇時間去用的，應該只碰到少部分的功能，就盡量紀錄列出之後若我有空有碰到新東西覺得要記錄的話會持續新增到這個網頁版的筆記 ------ 我使用到後來，有時想到一些功能建議會在VSCode上按Help > Search Feature Requests 然後就會到 https://github.com/Microsoft/vscode/issues?q=is%3Aopen+is%3Aissue+label%3Afeature-request+sort%3Areactions-%2B1-desc 上面可以看到很多issue並且持續有人在提出建議或問題想看最新的issue 可以點Sort>Newest 於是我了解到他有點算是還在發展中未完全成熟的IDE，感覺有些地方還不夠完整舉兩個問題 1. JS intellisense doesnt work in HTML script tag - VSCode GitHub Issues #4369 http://stackoverflow.com/questions/37055382/how-to-enable-intellisense-for-javascript-in-visual-studio-code 1. Create an HTML file and a <script type="text/javascript> ....... </script> block. 2. Start coding in the block then you will see intellisense doesnt work. https://github.com/Microsoft/vscode/issues/4369 另外在html中 Ctrl+K+C是會產生 註解符號可是對於放在html 中的javascript 就不會自動偵測要使用 // 當註解符號，一樣用 ，這我覺得有點太不方便了 2. 201606-201610左右 Win10的VSCode終端機很奇怪啟不起來會有異常 Integrated terminal does not launch when project folder contains special/unicode characters #7727 https://github.com/Microsoft/vscode/issues/7727 我之前還以為這個問題會持續很久但是剛剛再看發現竟然在八天前約2016/10月初被解掉了從之前issue討論過程中的質疑可以略為感受到開發中的氛圍 ugros commented on 9 Sep ‧ edited I've already opened an issue to this exact same problem 3 months ago. It was closed, because for Tyriar everything seemed to work fine. I've tried VScode on 3 different computers, with both powerShell and cmdprompt, with default settings, and it never worked. In fact, I've never seen a Windows computer that had integrated terminal working. I think I'm switching back to an IDE that can handle basic stuff. Microsoft member Tyriar commented on 9 Sep ‧ edited @ugros many people are experiencing this issue as you can see from the linked issues. This issue is actually on the integrated terminal backlog (#9959) and is one of the major bugs I'll be looking at in September. Keep in mind we're quite a small team with a lot of responsibilities, there is only so much we can do each release. Also I can't see your original issue? https://github.com/Microsoft/vscode/issues/created_by/ugros 不過竟然被解掉了，出乎我意料之外 Tyriar added the help wanted label on 20 Sep Tyriar modified the milestone: Backlog, September 2016 on 20 Sep This was referenced 27 days ago Closed Terminal dont work,wenn folder is open .maestrotwors@gmail.com #12483 Closed Terminal Process terminated if the folder contains Chinese characters #13013 the-ress commented 8 days ago I've created a pull request with the fix here: chjj/pty.js#176 Tyriar referenced this issue 8 days ago ClosedCan't open terminal when opening a Chinese named directory #13549 Tyriar modified the milestone: October 2016, Backlog 8 days ago Tyriar added a commit that closed this issue 8 days ago Tyriar closed this in 74d0241 8 days ago Microsoft member Tyriar commented 8 days ago Fixed thanks to @the-ress's pull request! You can try this out in the Insiders build tomorrow or in stable v1.7. 另外從Release Note https://code.visualstudio.com/updates/v1_6 我是可以感受到每個月都仍然有許多新功能不段的在釋出，所以覺得VSCode仍算是蓬勃發展中的一個編輯器從左邊側欄的年月來看應該是201506開始發展的到目前一年多不過整體來說，已經完成的功能事都還不錯但我對其他同類型編輯器還不熟悉就無法提供比較以上前情提要完畢 ------------ 以下是摸索過程的一些紀錄 (只列出我碰到的功能滿少的，完整功能請自行查看官方文件or估狗大神!) == MarketPlace 算是一個涵括各種擴充功能的地方、市集之類的 https://marketplace.visualstudio.com/ 其中包含了 == Theme 有比內建更豐富的Theme(布景、字體配色)可以選擇 https://marketplace.visualstudio.com/vscode/Themes?sortBy=Downloads 每個Theme點進去會有介紹，並且會有安裝教學 Installation Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. 裝了上方extension的theme之後，還是要CtrlShiftP>>打Theme然後去選，選單裡會出現新安裝的Theme可以直接選用 == 快速鍵 Ctrl+K+C 註解游標所在行or反白部分 Ctrl+K+U 取消註解游標所在行or反白部分快速複製單行 The commands your are looking for are editor.action.copyLinesDownAction and editor.action.copyLinesUpAction. You can see the associated keybindings by picking File |Preferences | Keyboard Shortcuts. The keybinding is Shift+Alt+Down and Shift+Alt+Upon Windows How do I duplicate a line within Visual Studio Code? http://stackoverflow.com/questions/30203752/how-do-i-duplicate-a-line-within-visual-studio-code Shift+Delete 直接刪掉游標所在行 Alt+Z 切換word wrap How to switch word wrap on and off in VSCode? http://stackoverflow.com/questions/31025502/how-to-switch-word-wrap-on-and-off-in-vscode Code自動排版 -- On Windows, code formatting is available in VSCode through the shortcut SHIFT+ALT+F http://stackoverflow.com/questions/29973357/how-do-you-format-code-in-visual-studio-code-vscode Ctrl 加 - / = 放大、縮小畫面 Ctrl+B 顯示隱藏側藍這裡有罪完整快速鍵列表、和教你如何自定義各種shortcut(見滿下方Customizing Shortcuts 條目) 也就是你可以把shortcut改成你想要的按鍵組合，透過修改一個shortcut配置檔 https://code.visualstudio.com/Docs/customization/keybindings Customizing Shortcuts All keyboard shortcuts in VS Code can be customized via the User/keybindings.json file. * To configure keyboard shortcuts the way you want, go to the menu under File > Preferences >Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts on Mac) * This will open the Default Keyboard Shortcuts on the left and your User/keybindings.json file where you can overwrite the default bindings on the right. == The Basics of Visual Studio Code https://code.visualstudio.com/Docs/editor/codebasics === VS Code comes with a built-in JavaScript/TypeScript language service so you get JavaScript and TypeScript code intelligence out-of-the-box. For other languages, like Go, Python, and C#, you will need to install an extension for deep language service integration. Language services provide the code understanding necessary for features like IntelliSense (suggestions) and smart code navigation (Go to Definition, Find All References, Rename Symbol). Different language extensions provide different levels of support for VS Code's language features but rest assured the community is very active adding new languages and great functionality. Learn more about installing VS Code extensions in our Extensions Marketplace topic and visit the Marketplace to see what's available for your favorite programming languages. == 10 Awesome Features of Visual Studio Code http://developer.telerik.com/featured/10-awesome-features-of-visual-studio-code/ 8 Powerful Visual Studio Code Extensions for Front-end Developers http://www.hongkiat.com/blog/visual-studio-code-extensions/ == Task https://code.visualstudio.com/docs/editor/tasks == Open file by browser 在VSCode按快速鍵就能直接用瀏覽器啟動檔案 How to Launch Files in a Browser from Visual Studio Code https://www.webucator.com/blog/2016/06/launch-files-browser-visual-studio-code/ How to view my HTML code in browser with Visual Studio Code? http://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code For Windows - Open your Default Browser - Tested on VS Code v 1.1.0 Answer to both opening a specific file (name is hard-coded) OR opening ANY other file. Steps: 1- Use ctrl+shift+p to open "Command Palette". 2- Type in Configure Task Runner, then click Enter. The tasks.json file opens up, delete the script displayed and replace it by the following: { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["test.html"]} 3- Save it ctrl+s. 4- Switch back to your "test.html" (the name of your html page), and press ctrl+shift+b to view your "test.html" page in your Web Brower. *Note (to clarify): If your html file name is i.e. "forms.html", then change "args":["test.html"] to"args":["forms.html"]. * IMPORTANT (very useful): To open ANY html file that is open in your VS Code Explorer, then change "args":["test.html"] to "args": ["${file}"]. *Note: ["{$file}"] does not work. ["${file}"] Works! To Configure Task in a new folder: Select the Tasks: Configure Task Runner command and you will see a list of task runner templates. Select Others to create a task which runs an external command. . . . You should now see a tasks.json file in your workspace .vscode folder with the following content: . . . by http://code.visualstudio.com/Docs/editor/tasks == 入門影片活用 Visual Studio Code https://channel9.msdn.com/Series/Mastering-Visual-Studio-Code or youtube查查 Visual Studio Code Beginner/Tutorial 等等 == set UI language Display Language https://code.visualstudio.com/docs/customization/locales == Intellisence https://code.visualstudio.com/docs/languages/php#_debugging you can search for PHP extensions from within VS Code by running the Extensions: Install Extension command (Ctrl+Shift+P and type ext install) then filter the extensions drop down list by typing php. 要改成其他語言就把上面做法中的php換掉就可以了 php堆薦 Crane php intellisence html推薦 html snippet Intellisense 屬於外掛程式要安裝外掛程式或看你裝了那些外掛程式就想外掛跟extension這單字有關所以Ctrl+Shift+P再打ext就可以看到 install extension/ show all installed extension的選項了然後再打關鍵字搜尋，例如想查html相關外掛就打html 下面就會列出很多也可以下html intelli 就會列出相關的外掛 == 裝了extension之後，像是要打 <table></table> 就只要先打 ta 這時下拉選單出現table 再按一下Tab intellisense會幫你輸入成 <table> </table> 就可以了，相當省力 == Editing TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components. A language specification can be found here. 這部分我還不太熟，只是有看到就先記一下 https://code.visualstudio.com/docs/languages/typescript#_using-newer-typescript-versions == Editing - Smart IntelliSense Parameter Hints Hover Go to Definition Goto Symbol Open symbol by name Peek Bracket matching Reference information Rename symbol Errors & Warnings Folding https://code.visualstudio.com/docs/editor/editingevolved -- ~ Sent from my PCMan Combo ~ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.42.76.236 ※ 文章網址: https://www.ptt.cc/bbs/Programming/M.1476982819.A.A81.html ※ 編輯: name2name2 (114.42.76.236), 10/21/2016 01:28:57