我把最近這段期間有空時摸索的歷程做了一份筆記，
不算碰到很多功能僅盡量列出


筆記網頁版
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 [email protected] #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