怎麼用vscode編輯程序

Ⅰ 如何優雅地使用 VSCode 來編輯 vue 文件

先來扒一扒使用 PHPStorm 遇到的問題：
vue文件雖然可以通過插件來解決高亮問題，但是 <script> 標簽中的 ES6 代碼的識別老是出問題，箭頭函數有的時候能正確識別，有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 <style> 標簽中使用的 less 語法
vue文件中 <template> 部分使用了大量的自定義標簽（自定義組件）和自定義屬性，會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內，還得自己到控制台中查看
如何安裝 vscode
很簡單，傳送門： 官網下載安裝
第一步，要支持 vue 文件的基本語法高亮
這里，我試過好3個插件： vue , VueHelper 和 vetur ，最終選擇使用 vetur 。
安裝插件： Ctrl + P 然後輸入 ext install vetur 然後回車點安裝即可。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便，安裝完成後還不用重啟整個程序，只要重新載入下工作區窗口就可以了。
安裝完 vetur 後還需要加上這樣一段配置下：
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
這時可以打開一個vue文件試試，注意下右下角狀態欄是否正確識別為 vue 類型：
如果被識別為 text 或 html ，則記得要點擊切換下。
第二步，要支持 vue 文件的 ESLint
可能還有人會問為什麼要 ESLint ？沒有 lint 的代碼雖然也可能可以正確運行，但是 lint 作為編譯前的一道檢測成本更小，而且更快。此外， ESLint 還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。
jshint 本來也是個不錯的選擇，但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.
安裝插件： Ctrl + P 然後輸入 ext install eslint 然後回車點安裝即可。
ESLint 不是安裝後就可以用的，還需要一些環境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。
其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝
接著，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建：
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。
要是不小心少個括弧之類的都可以有對應的報錯:
多餘 import 也都能報錯:
還是蠻智能的。
第三步，配置構建任務
vue 項目的構建我選擇用 webpack ，不過，並不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個，一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。
於是乎，對應 vscode 中的 tasks 也是有兩個： build 和 watch ，簡單配置如下：
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
"version": "0.1.0",
"tasks": [
{
"taskName": "build",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/build.js"
],
"suppressTaskName": true,
"isBuildCommand": true
},
{
"taskName": "watch",
"echoCommand": true,
"command": "node",
"args": [
"build/bin/watch.js"
],
"suppressTaskName": true,
"isBackground": true
}
]
}
這樣配置好後，按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢（要10秒+），一般我都用實時構建： Ctrl + P 然後輸入 task watch <回車> 即可開始實時構建。實時構建除了第一次比較慢，其他時候還是非常快的，一般1秒內就可以構建好。
最後，webpack 構建錯誤提示
webpack 構建失敗後一般都會有錯誤提示，會顯示在輸出窗口中：
為啥是彩色的？ 因為裝了 Output Colorizer 這個插件。
當然，這樣還是不夠方便 -- 實時構建是後台運行的，「輸出」窗口一般也都是在後台，每次保存完文件還得點開豈不麻煩。
要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎？翻了下 vscode 的文檔，發現有神奇的 problemMatcher -- 可以對任務輸出進行解析，解析出的問題會顯示在「問題」窗口中，如果還有文件名行號和列號，則會在源代碼編輯窗口中對應的位置標出來。
先放個最終效果：
在這個文件的第32行，import 了一個不存在的模塊，這樣的錯誤在 ESLint 中當然是檢查不出來的，然而在 webpack 的實時構建中會報錯：
這個事情的困難在於兩點：
如何通過 problemMatcher 把這個錯誤給抓出來？
如何找到錯誤對應的行號？（如果可能的話，還有列號）
webpack的錯誤輸出格式並不是完全統一的，而且有些還沒有行號 -- 一方面可能是 webpack 的 bug ，另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建，報錯的行號可能對不上。
最終我的解決方案是對 webpack 的錯誤重新格式化輸出，然後匹配：
首先，重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包（偶新寫的）
npm install --save-dev format-webpack-stats-errors-warnings
然後，到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化後的輸出：
更多使用介紹見 github
最後，在 .vscode/tasks.json 中，每個任務下添加 problemWatcher :
// ...
{
"taskName": "build",
// ...
// build 任務的:
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
}
}
}
{
"taskName": "watch",
// ...
// watch 任務的：
"problemMatcher": {
"owner": "webpack",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
"severity": 1,
"file": 2,
"line": 3,
"column": 4,
"endLine": 5,
"endColumn": 6,
"message": 7
},
"watching": {
"activeOnStart": true,
"beginsPattern": "^\\s*Webpack begin run",
"endsPattern": "^\\s*Build complete at"
}
}
// ...
}
// ...
註：在 watch 任務中，為了匹配何時開始和何時結束，我在 webpack 構建的 run 和 watch 時增加了一個 console.log('Webpack begin run') 的列印，而在構建完成後增加了一個 console.log("Build complete at ..") 的列印。

Ⅱ vscode使用教程是

vscode使用教程：

安裝：

安裝的東西沒什麼好說的，自行下載安裝吧，伙計。

配置：

用戶配置：

vscode的用戶配置分3個級別，分別是默認配置、全局配置和工作區配置，優先順序也依次遞增。對於團隊項目，一些規范可以通過項目目錄下建一個.vscode/setting.json文件進行配置。

快捷鍵綁定：

參考官方文檔，文檔中列出了所有指令對應的快捷鍵。快捷鍵我只修改了兩個與系統軟體沖突的。

代碼片段：

這個功能很像webstorm的live template的功能，雖然提示的時候沒有webstorm那麼精準和順手，不過總的來說，夠用。

設置語法遵循TextMate代碼片段語法，你可以通過安裝別人寫好的snippet插件，如果別人寫的snippet你用得不爽，那麼自己寫也簡單。

之前使用這個代碼片段有個痛點就是只能用方向鍵上下選擇提示，如果能使用ctrl+n/p上下選擇的話就更舒服了，沒想到現在已經支持了。

另外，有沒有人知道怎麼設置代碼提示內容，比如輸入result提示了XPathResult是什麼鬼。

插件：

4個月前剛知道vscode的時候，那時感覺插件還沒有那麼多，現在重新看了一下，真是應有盡有。牛逼啊！

這里介紹幾個我用過覺得不錯的插件

用戶配置同步 Visual Studio Code Settings Sync。Git 歷史 Git History。

文件圖標 vscode-icons。縮進輔助線 Guides。

Visual Studio Code（以下簡稱vscode）是一個輕量且強大的代碼編輯器，支持Windows，OS X和Linux。

內置JavaScript、TypeScript和Node.js支持，而且擁有豐富的插件生態系統，可通過安裝插件來支持C++、C#、Python、PHP等其他語言。

Ⅲ vscode怎麼創建c項目

vscode怎樣編寫c程序？

一、獲取C/C++擴展

1、打開vscode

2、ctrl+shift+x打開商店

3、搜索C/C++安裝、重啟vscode

.png

二、安裝GCC

1、下載MinGW

2、打開安裝程序，安裝到D盤（需要創建MinGW文件夾），安裝完成之後生成MinGW安裝管理器

3、管理器自動打開（如果沒有請手動），點擊All Packages,選中gcc.bin,g++.bin,gdb.bin,點擊Installation,選擇Apply Changes,點擊Apply提交進行安裝

.png

win+R,輸入control進入控制面板,依次點擊系統與安裝->系統->高級系統設置->環境變數，找到Path->編輯->新建，將安裝好的MinGW的bin文件夾路徑粘貼進去。

.png

三、配置智能提示

1、編寫一個測試文件demo.c,點擊引入的標准庫下的「提示燈」,生成c_cpp_properties.json文件

2、編輯c_cpp_properties.json

.png

c_cpp_properties.json修改內容如下：

.png

四、開啟調試功能

F5或Ctrl+F5啟用調試，選擇C++(GDB/LLDB)生成launch.json文件，修改如下：

Ctrl+Shift+P輸入Tasks:Configure Task配置任務，選擇使用模塊創建task.json文件，選擇Others模板，生成task.json文件，修改如下：

如果出現錯誤：進程終止，退出代碼：1，可能是gcc還沒被編輯器載入（測試方法：打開控制台，輸入gcc，看提示信息），重啟編輯器就可以。

Ⅳ vscode怎麼編譯python

首先需要安裝VScode Python插件。打開Python任意腳本，可以直接拖入。

點擊左下角的擴展按鈕，在彈出界面選擇「顯示擴展建議」。

然後點擊第一個Python插件進行安裝。安裝需要幾分鍾。安裝完成後點擊重啟。

接下來我們點擊用戶設置菜單。這時候會打開兩個文件。

我們在左邊文件Ctrl+F搜索Python關鍵字，找到pythonPath所在行

把這行拷貝到右邊文件，修改Python所在路徑。注意斜杠的方向，刪除末尾逗號

保存文件。然後點擊左邊的資源管理器按鈕，重新切換到我們的程序文件。

Ctrl+shift+B運行程序。這時候提示需要在文件夾目錄下才能進行配置。於是我們點擊打開文件夾按鈕，打開程序所在文件夾。

Ctrl+shift+B運行程序。這時候會提示配置任務運行程序，點擊配置。選擇運行任意外部命令菜單。

在打開的tasks.json文件中，我們需要修改兩個內容，路徑和執行文件名。

好了，現在Python的代碼可以Ctrl+shift+B直接運行了。文中的設置部分代碼可以在文末下載。使用愉快。

Ⅳ 2019年27個神奇的VSCode工具

Visual Studio Code（更簡稱為 VS代碼 ）是一個輕量級但功能強大的跨平台源代碼編輯器，可在桌面上運行。內置支持TypeScript和Chrome Debugger等開發工具，我很快就愛上了編輯器，我用它來構建我的項目。

誰 不 喜歡可供公眾使用和貢獻的bajillion開源擴展？

如果您正在尋找更多工具添加到您的開發工具包中，我希望本文可以幫助您找到一個新的工具來採用！

並非所有 這些工具都 專門針對JavaScript語言 ，而是針對您和我這樣有共同興趣的 JavaScript開發人員的 工具。 作為一名JavaScript開發人員 ，我將分享在幾個方面增強我的開發流程的內容，這些方面圍繞著人類五感中的五分之一。

以下是2019年針對JavaScript開發人員的26個神奇VS代碼工具

排在第一位的是我最喜歡的Project Snippets - 源自VS Code中內置的原始 用戶代碼段 。

如果您不熟悉用戶代碼段，基本上此功能允許您創建自己的代碼段以在整個項目中重復使用。

但究竟是什麼意思「重復使用」它們呢？

好吧，如果您經常發現自己編寫任何類型的樣板，如下所示：

實際上，你可以直接將其打入你的用戶片段，這樣你就不需要寫出（或復制並粘貼）整個事物，你只需要輸入一個自定義 前綴 來生成你配置它的片段。如果轉到「 文件」>「首選項」>「用戶代碼段」 ，則可以選擇通過單擊「 新建全局代碼段文件」 來創建新的全局代碼 段 。

例如，要為TypeScript React項目創建自己的 代碼段文件 ，可以單擊 New Global Snippets File ，鍵入 typescriptreact.json ，它將引導您到新創建的.json文件，您可以將其用於使用TypeScript構建的反應應用程序。

例如，要從上面的代碼示例創建用戶代碼段，您可以這樣做：

有了這個，你可以創建一個.tsx文件，輸入前綴，rsr並出現一個生成片段的建議。按彈出窗口上的 選項卡 將生成以下代碼段：

但是問題在於，這將持續存在於 所有項目中 （在某些情況下，這些 項目 對於一般的片段來說可能是強大的）。某些項目的配置略有不同，當您需要區分特定用例時，配置代碼段的全局文件開始成為問題。例如，一個用例是每個項目的項目結構不同：

對於具有該特定文件/文件夾結構的項目，這可能已足夠，但如果您正在處理Link組件具有類似路徑的另一個項目，該components/Link怎麼辦？

注意三個 邊界測試 如何用單引號將它們的值包裝起來：border: '1px solid red'。這在JavaScript中是完全有效的，但如果您使用樣式組件作為項目的樣式解決方案呢？語法不再適用於該工作空間，因為樣式化組件使用常規CSS語法！

這就是Project Snippets開始閃耀的地方！

如果你喜歡在代碼之間編寫注釋，那麼你有時可能會發現搜索過去編寫的某些文檔的位置有點令人沮喪，因為代碼有時會變得有點擁擠。

通過更好的評論，您可以通過介紹彩色評論使您的評論更加明顯：

現在，您可以更好地提醒您的團隊成員，!或者?引起他們的注意:)

我第一次看到這個擴展的屏幕截圖時，我知道我必須採用並將此權利引入我的開發工具包中。編碼是我的熱情，激情應該是有趣的。所以有了這種心態，這絕對有助於我享受我喜歡做的事情。

一個快速有趣的事實是，有時多一點顏色可以幫助加快發展流程，因為它可以影響血液流動和喚醒。換句話說 - 您 不僅 可以獲得 娛樂 ，還可以通過為您的工作流程添加顏色來改善您的 健康 狀況！

Material Theme是一個史詩般的主題，您可以直接安裝到VS代碼中，使您的代碼如下所示：

這必須是有史以來最好的主題之一。我不確定如何詳細說明主題是多麼棒，但這真是太棒了。立即安裝並與我一起努力將世界變成一個物質主題世界！（或者不要加入我，只使用主題。這也很酷）

如果您是TypeScript用戶：由於TSLint背後的支持者宣布計劃在今年某個時候棄用TSLint，您應該開始考慮移動tslint配置以使用ESLint + TypeScript配置方法。

項目逐漸採用@ typescript-eslint / parser和相關軟體包來確保其項目的面向未來的設置。您仍然可以使用新設置來充分利用ESLint的大多數規則和兼容性。

對我來說，由於多種原因，stylelint在我的所有項目中都是必須的：

現在我不確定你或其他開發人員在為他們的項目進行頭腦風暴時喜歡做筆記，但我喜歡用降價格式寫下筆記。

首先，我很容易理解。還有大量的工具可以幫助促進寫下降記錄文本的過程，包括markdownlint。Markdownlint是一個vs代碼擴展linter，可以幫助您在.md文件中進行樣式檢查。更酷的部分是它支持 更漂亮的格式化 ！

此外，我個人喜歡在我的所有項目上安裝Docsify，因為它支持每個項目的降價和其他增強功能。

我習慣在我的應用程序代碼中編寫待辦事項，因此像TODO Highlight這樣的擴展對於突出我在整個項目中設置的待辦事項非常有用。

Import Cost是第一次嘗試時變得非常有用的工具之一。但過了一段時間，你開始意識到你不再需要這個工具了，因為它會告訴你一段時間內你已經知道的東西。盡管如此，請嘗試使用此工具一段時間，因為您可能會發現它很有用。

Sometimes it can get frustrating trying to match the other end of a tag. That's where Highlight Matching Tag becomes to take your frustrations away:

說到挫折，有時候回到音樂播放器切換音樂然後不得不回到vs代碼繼續做你正在做的事情會讓人感到沮喪。這就是vscode-spotify的用武之地，因為它允許你在內部和代碼中使用spotify！

使用此擴展程序，您將能夠在狀態欄中看到當前正在播放的歌曲，通過按熱鍵切換歌曲，單擊按鈕來控制spotify等等！

GraphQL 一直在不斷發展，因為我們開始在JavaScript社區的每個角落看到它。如上所述，如果您尚未考慮在處理GraphQL語法時從語法高亮，linting和自動完成功能中受益，那麼開始考慮將VSQL的GraphQL安裝到您的vs代碼中可能是一個好主意。

我個人經常使用GatsbyJS，因此我的日常編碼生活涉及閱讀GraphQL語法。

與上面的 突出顯示匹配標記 類似的原因。如果您無法通過縮進找到自己的方式，那麼Indent Rainbow可以幫助您更輕松地閱讀這些縮進。

這是一個例子：

這是其中一個擴展，其中 每個人都 問我「你從哪裡得到的？」 如果他們還沒有遇到這個擴展。基本上，Color Highlight有助於突出顯示代碼中的顏色，如下所示：

Color Picker是一個vscode擴展，為您提供圖形用戶界面，以幫助您選擇和生成CSS顏色符號等顏色代碼。

我第一次閱讀REST Client並親自試用它，它似乎不是像Postman這樣的老軟體的有用工具。

但是我使用REST Client擴展的次數越多，我就越意識到它會對我的開發工具產生多大的影響，特別是在測試API時。

您可以創建一個新文件並使用以下一行：

創建HTTP GET請求所需要做的就是突出顯示一行，轉到命令面板（CTRL + SHIFT + P），單擊 Rest Client：Send Request ，它將繼續並彈出一個新選項卡在一秒鍾內請求響應詳細信息。

很有用：

您甚至可以將參數或請求正文數據傳遞給POST請求，下面只需要幾行代碼：

這將使用body參數發出POST請求 { "email": "[email protected]", "password": 1 }

我討厭不得不手動寫下我在開發工具中使用的擴展筆記的降價列表，並將其保存在像Evernote這樣的筆記服務中，直到Settings Sync拯救。

基本上，你只需要一個gist / github帳戶，每次你想要保存你的設置（這包括鍵綁定，片段，擴展等）你只需要按 SHIFT + ALT + U 將 私人 設置上傳到你的吉斯帳戶，所以下次登錄或重新格式化到另一台計算機時，您可以通過按 SHIFT + ALT + D 立即下載您的設置。

Todo Tree將幫助您在整個應用程序代碼中找到您創建的所有待辦事項到一個樹中，您可以在面板的左側一次查看它們：

Toggle Quotes是一個有趣的實用程序擴展，可讓您在引號之間切換。當您即將使用字元串插值時需要切換到反引號時，它會派上用場，特別是當更漂亮的習慣是將字元串美化為單引號時。

您可以在不使用Better Align首先選擇代碼的情況下對齊代碼。

要使用：將游標放在要對齊的代碼中，然後使用 CTRL + SHIFT + P （或任何您自定義的快捷方式打開命令調色板）彈出命令調色板並調用 Align 命令。

自從我第一次啟動VS代碼以來，Auto Close Tag一直對我很有用。它允許你輸入類似的東西<p，按下斜線/，它將為你完成最後一個箭頭。這是默認情況下不在vs代碼中的東西，對我來說非常有用:)

當我的數組沒有按字母順序對齊時，我有一種令人沮喪的習慣，就是變得沮喪。幸運的是，Sort Lines等工具可以讓我的生活更輕松。如果你以類似的方式感到沮喪，你可能會發現這對你很有幫助。

我可能是唯一一個發現這個有用的人，但是VScode Google Translate幫助我完成了我的項目，因為我參與了一個多語言的項目。如果您不想離開編輯器，這很有用。

Prettier是vs代碼的擴展，可自動格式化您的JavaScript / TypeScript /等。代碼使用更漂亮。

我更喜歡Material Icon Theme而不是其他圖標主題，因為對於哪些文件類型來說，它更明顯，尤其是在黑暗主題中工作時。

HTML中的CSS類名稱的IntelliSense是基於HTML class屬性的CSS類名稱完成，該屬性基於工作區中的定義。

Path Intellisense是一個vs代碼擴展，可以為您自動填充文件名。

我希望這有助於您找到新的東西添加到您的開發套件中！

Ⅵ visual studio code怎麼運行代碼

vscode寫html 代碼不能運行 Code language not supported or defined是沒有正確調試造成的，解決方法為：

1、首先需要在這里打開vs code軟體，新建後才能編譯測試。

Ⅶ 用vscode可不可以寫JAVA,我看有些人用eclipse。

輕量的功能，vscode完全可以駕馭。但是如果是大型項目還是要Idea或者Eclipse，它們是專門為Java定製的集成開發環境，功能更齊全。當然我們也期待編輯器統一的一天，或者編程語言統一的一天。

vscode嚴格來說是一個文本編輯器，理論上來講任何代碼都可以寫，但是寫程序不光是寫代碼，還需要調試等等，這些功能vscode是通過各種插件來完成的。

eclipse是一種IDE，除了編輯代碼之外還包括了一套，完整的開發環境。

技術上當然可以，理論上你不用任何工具只下載JDK+命令行都能編寫Java程序，但實際上應該沒有人會在工程中這樣做，可能用於學習或演示用的小程序。

因為一旦項目超過一定的規模，沒有好的IDE的支持你肯定會瘋，clipse是一個不錯的IDE平台並且免費（不止可以用於Java開發），但只比較功能和開發效率的話我更推薦IDEA，有收費版也有社區版也是免費的，功能略有限制。

總結如下：

之前獵奇用vscode裝了Java插件寫了一個小項目，開始時還不錯，各種功能代碼補全編譯打包都還行，但是編譯可配置項很少。

後來涉及到中文輸出後才發現有諸多不便，不能像idea一樣自動配置編譯參數。vscode還有的不足是，在導入項目時，無論是否為此插件創建的項目，都有很大概率檢測不到是一個Java項目，或者檢測到的不完整，會出現各種依賴問題。