1. 華為padvscode配置
華為padvscode配置
想要優雅且高效的編寫代碼,必須熟練使用一款前端開發工具。但前端開發工具數不勝數,像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其輕量且強大的代碼編輯功能和豐富的插件生態系統,獨受前端工師的青睞。網上有很多vscode的配置以及使用博客,但都沒有本篇那麼詳細且全面。
軟體下載
直接在官網進行下載
Visual Studio Code - Code Editing. Redefined
最近很多人留言說官網下載被限速,如果大家存在這種情況,可以在「前端碼頭」後台發送vscode獲取軟體包。
首頁
vscode設置成中文
vscode默認的語言是英文,對於英文不好的小夥伴可能不太友好。簡單幾步教大家如何將vscode設置成中文。
按快捷鍵「Ctrl+Shift+P」。
在「vscode」頂部會出現一個搜索框。
輸入「configure language」,然後回車。
「vscode」裡面就會打開一個語言配置文件。
將「en-us」修改成「zh-cn」。
按「Ctrl+S」保存設置。
關閉「vscode」,再次打開就可以看到中文界面了。
當然如果你不願意設置,也可以直接安裝它的中文插件,還是很人性化的。
VScode用戶設置
1. 打開設置
文件--首選項--設置,打開用戶設置。VScode支持選擇配置,也支持編輯setting.json文件修改默認配置。個人更傾向於編寫json的方式進行配置,下面會附上我個人的配置代碼
這里解析幾個常用配置項:
(1)editor.fontsize用來設置字體大小,可以設置editor.fontsize : 14;
(2)files.autoSave這個屬性是表示文件是否進行自動保存,推薦設置為onFocusChange——文件焦點變化時自動保存。
(3)editor.tabCompletion用來在出現推薦值時,按下Tab鍵是否自動填入最佳推薦值,推薦設置為on;
(4)editor.codeActionsOnSave中的source.organizeImports屬性,這個屬性能夠在保存時,自動調整 import 語句相關順序,能夠讓你的 import 語句按照字母順序進行排列,推薦設置為true,即"editor.codeActionsOnSave": { "source.organizeImports": true };
(5)editor.lineNumbers設置代碼行號,即editor.lineNumbers :true;
我的個人配置,供參考:
{ "files.associations": { "*.vue": "vue", "*.wpy": "vue", "*.wxml": "html", "*.wxss": "css" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "git.enableSmartCommit": true, "git.autofetch": true, "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "html" }, //主題顏色 //"workbench.colorTheme": "Monokai", "git.confirmSync": false, "explorer.confirmDelete": false, "editor.fontSize": 14, "window.zoomLevel": 1, "editor.wordWrap": "on", "editor.detectIndentation": false, // 重新設定tabsize "editor.tabSize": 2, //失去焦點後自動保存 "files.autoSave": "onFocusChange", // #值設置為true時,每次保存的時候自動格式化; "editor.formatOnSave": false, //每120行就顯示一條線 "editor.rulers": [ ], // 在使用搜索功能時,將這些文件夾/文件排除在外 "search.exclude": { "**/node_moles": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 這些文件將不會顯示在工作空間中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts編譯後生成的js文件將不會顯示在工作空中 }, "**/node_moles": true }, // #讓vue中的js按"prettier"格式進行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue組件中html代碼格式化樣式 "wrap_attributes": "force-aligned", //也可以設置為「auto」,效果會不一樣 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } } }
最近經常有人微信問我,這個配置代碼寫在哪裡?
新版的vscode設置默認為UI的設置,而非之前的json設置。如果你想復制我上面這段代碼進行配置,可以進行下面的修改
文件>首選項>設置 > 搜索workbench.settings.editor,選中json即可改成json設置;
禁用自動更新
文件 > 首選項 > 設置(macOS:代碼 > 首選項 > 設置,搜索update mode並將設置更改為none。
開啟代碼提示設置
第一步:點擊左下角點擊設置圖標,找到並點擊「setting」
第二步:到搜索框里搜索「prevent」--->並取消此項的勾選
常用的快捷鍵
高效的使用vscode,記住一些常用的快捷鍵是必不可少的,我給大家羅列了一些日常工作過程中用的多的快捷鍵。
以下以Windows為主,windows的 Ctrl,mac下換成Command就行了
對於 行 的操作:
重開一行:游標在行尾的話,回車即可;不在行尾,ctrl + enter 向下重開一行;ctrl+shift + enter 則是在上一行重開一行
刪除一行:游標沒有選擇內容時,ctrl + x 剪切一行;ctrl +shift + k 直接刪除一行
移動一行:alt + ↑ 向上移動一行;alt + ↓ 向下移動一行
復制一行:shift + alt + ↓ 向下復制一行;shift + alt + ↑ 向上復制一行
ctrl + z 回退
2. 作為一個前端開發,vscode有哪些值得安裝的插件
WijmoJS 前端開發工具包由多款高效、靈活的純前端控制項組成,全面支持 Angular、React、Vue、TypeScript、Knockout 和 Ionic框架,用於快速搭建企業級桌面/移動 Web 應用程序。WijmoJS 可靈活應對客戶需求變化,縮短新項目研發周期,高效處理海量用戶數據,提升產品核心競爭力。
藉助葡萄城深厚的技術底蘊,WijmoJS 為各領域用戶提供更穩定、更高效的前端開發工具,幫助中國招商銀行、微軟、思科、特斯拉、富士通等知名企業快速搭建其 Web 應用程序。WijmoJS 憑借先進的觸控設計、全面的框架支持、頂級的控制項性能、零依賴的產品特性和易用、輕松的操作體驗,全面滿足前端開發所需,已成為構建企業 Web 應用程序最高效的純前端開發工具包。
與此同時,WijmoJS 的可視化設計器已正式推出,包含 VSCode 設計器和在線設計器。通過使用設計器,您可以在想要配置的控制項中選擇並瀏覽所有可用的內置選項,然後導出要在 WijmoJS 應用程序中使用的代碼,或者通過設計器自動更新 HTML 源文件。
3. visualstudiocode運行生成網頁
一、首先一步就是下載vscode
步驟也是特別的簡單,就是直接next,就好。
二、使用步驟
1.先在電腦裡面的隨便一個盤新建一個文件夾
如圖所示
然後雙擊紅色圈住的地方,全刪除後,輸入cmd
就會出現這個,直接在命令框中輸入code
在黃色圈圈住的地方點擊,然後就新建一個文件夾,網頁的後綴就是html,css的後綴就是css
最後文件夾就會出現這個網頁
如何在網頁中輸入
1.vscode提供了一個很友好的方式
直接使用英文狀態下的shift+!
然後就會出現html的基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
<body>
</body>
1
2
3
1
2
3
在上面的框架中就能輸入想在網頁上顯示的東西了
2.預覽網頁的方法
直接用Alt+B就可以實現預覽了。
3.如果想要學習具體建網頁的方法,菜鳥教程會是一個不錯的選擇
總結
以上就是介紹簡單建網頁的一個方法,如果有不懂或者錯誤的地方,歡迎留言,大家一起進步
點擊閱讀全文
打開CSDN,閱讀體驗更佳
上課摸魚必備 -- Vscode網頁版的搭建教程_Calvin Haynes的博客-CSDN...
(一)運行效果 這個Vscode在線版是運行在我買的阿里雲學生機的9999埠的,畢竟9.9一月,對於學生黨很友好,我的個人博客也搭在上面的,性能一般,但是也很夠用了。 (二)基礎配置 1 - 下載code-server到伺服器上 進到伺服器的SSH中,這個...
繼續訪問
Windows11下載安裝vscode並編寫第一個頁面_小花皮豬的博客_v...
hello vscode! 然後測試代碼是否打開網頁 打開方式1:在工作目錄雙擊打開(不推薦) 打開方式2:使用vscode打開(推薦) 需要按照一個插件,參考我的這篇文章 https://blog.csdn.net/weixin_46713508/article/details/126800198...
繼續訪問
(網頁開發/前端)配置VsCode,讓您擁有更舒適的開發環境
利用vscode支持的各種擴展,我們能極大優化編程體驗
繼續訪問
製作一個簡單HTML個人網頁網頁——人物介紹梵高(HTML+CSS)
HTML5期末考核大作業源碼 包含 個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞 蹈、 動漫、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、游戲、 節日、 戒煙、 電影、 攝影、 文化、 家 鄉、 鮮花、 禮品、 汽車、 其他 可滿足大學生網頁大作業網頁設計作業需求, 喜歡的可以下載! 原生(HTML+CSS+JS),網頁作品代碼簡單,可使用任意HTML編輯軟體(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html編輯軟體進行運行及修改編輯等操作) HTML靜態網頁設計作業,採用DIV+CSS布局,共有多個頁面,使用CSS排版比較豐富,色彩鮮明有活力,頂部導航及底部 區域背景色為100%寬度。都是給學生定製的都符合學生考試期末作業的水平,有的有js,有的視頻+音樂+flash的等 元素的插入。 【查看更多源碼地址】:https://blog.csdn.net/VX_WJ88950106?type=blog
使用VScode寫一個html頁面
本文給大家分享的是使用vscode編寫的第一個html頁面的全過程,非常的簡單,菜鳥看看就行,高手請略過
vscode 打開網頁_簡單粗暴,直接教你上手製作網頁—前端開發入門
首先我要說學習前端網頁製作其實很簡單!今天我帶著你踏入前端開發的大門,我不會給大家說一些難懂的概念上的東西,有些知識其實不必知道,學習之後再慢慢了解也是可以的。簡單粗暴,直接讓你上手就完事了!先大致了解一下HTML的構成簡單的說HTML網頁的構成基本可以理解為是由標簽、樣式和屬性組成的標簽:可以理解為是組成網頁的框架或是盒子。樣式:決定標簽的外觀(大小、寬高等等)屬性:標簽本身自帶的一些樣式或是功...
繼續訪問
網頁開發工具VSCode的使用
網頁開發工具VSCode的使用
繼續訪問
熱門推薦 VSCode設置網頁代碼實時預覽
目錄 一、設置描述 二、操作步驟 一、設置描述 1.VSCode作為一款很不錯的開發軟體,相比DW更小巧,用來測試前端特別不錯,那麼我們平時開發網頁發現只有寫完代碼,然後保存,接下來到瀏覽器中刷新查看效果,然後不停重復,我們發現很多時間就這樣浪費到了這三個步驟上。 2.其實我們可以在VSCode中配置一個網頁伺服器,修改完代碼之後只需要保存代碼瀏覽器就可以實時預覽 二、...
繼續訪問
vscode 創建頁面
vscode 創建頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
繼續訪問
vscode新建自己第一個頁面
vue基礎:vscode新建第一個頁面
繼續訪問
用VSCode寫簡歷表
三.效果圖 當然大家可以改掉裡面的文字哦~
繼續訪問
最新發布 使用vscode編寫第一個Hello World程序頁面詳細步驟
前言: 對於編程人員來說,第一個程序幾乎必寫的都是Hello World,也是代表進入了新的學習篇章吧 一、操作步驟 1.打開vscode(如果沒有這個軟體,可以從我的文章裡面看下載教程),文件---->新建文本文件或者使用快捷鍵:CTRL+N打開 2.文件-->保存 3.選擇文件保存位置後,文件的後綴名txt更改為html,然後點擊保存 4.vscode裡面第一行輸入! 注意:這個!一定是英文輸入法的才會顯示。如果是中文的!這兩個感嘆號不會顯示出來的 8.任意選擇一個瀏覽器打開(我是選擇這個web
繼續訪問
VSCode設置網頁代碼實時預覽的實現
主要介紹了VSCode設置網頁代碼實時預覽的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
VS Code 創建HTML頁面教程
由於剛開始學習前端,我乃非專業人士也不知道怎麼使用這個軟體寫出頁面,經過四方搜尋寫了這個教程,希望大家在學習路上更進一步~ VS Code 創建頁面 打開VS Code 點擊文件,新建文件 (Ctrl + N) 新建之後一定要先Ctrl + s先保存 在裡面輸入一個感嘆號,選擇第一個感嘆號,骨架就出來啦~ 接下來我們需要安裝一個插件,這樣就可以直接右鍵運行網頁 安裝這個open in browser, 安裝好後記得重啟一下軟體,然後右擊就會有在瀏覽器中運行的選項。 ...
繼續訪問
如何用vs code搭建自己的網站
網站 由多個網頁組成 HTML:超文本標記語言,專門用來製作網頁,用來描述網頁的一種語言(例如圖片,動畫,聲音),且不等價於編程語言,個人認為可以理解為由一大堆標簽組成 標簽 定義:全在<>中,標簽幾乎都是成對存在,少數是單標簽 關系: ①包含 類似父子關系,比如這里的上下倆head ②並列 類似兄弟關系,比如這里的最有左右倆body 基本結構標簽 ①<html> </html>:這是頁面中最高級別的標簽,簡稱根標簽 ②<head> </he
繼續訪問
前端新手學習記錄2 -使用vscode編寫個人網站首頁
編寫了一個網站首頁,參照網上的例子。界面如下 代碼如下: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,in...
繼續訪問
vscode+django 搭建自己的個人網站(三) ——創建應用以及基礎配置
由於現在大家都在使用mysql資料庫來做配置,但是DJANGO卻自帶了sqllite3資料庫,而資料庫的轉換操作會比較麻煩,所以最後還會利用配置文件來提前修改資料庫配置,便於我們後面的數據插入
繼續訪問
網頁版vscode用法簡單介紹
網頁版vscode用法簡單介紹
繼續訪問
vscode+django 搭建自己的個人網站(五) ——使用markdown編輯器添加數據以及URL與視圖
雖然我們可以利用後台來添加數據了,但是像文章這樣龐大而且已經通過其他編輯器寫好的部分想要添加進去還是比較麻煩的,如何在添加的時候像寫文章一樣方便呢,這里就可以讓我們的後台部分也擁有一個富文本編輯器就好啦,不過由於筆者的博客都是用markdown來寫的,所以筆者在這里要添加markdown編輯器
繼續訪問
vscode風格個人主頁源碼
源碼介紹: 我一直都想再做一次個人主頁,因為上一個太過於簡約,但是出於靈感枯竭一直沒有開始。偶然一次使用vscode的時候,在自己喜歡的主題上做開發總是很有動力,突然就想到了把個人主頁做成vscode一樣
vscode+django 搭建自己的個人網站(一) ——環境搭建與配置
相對於pycharm,vscode更加的靈活快速,對於小型的項目來說算是一個很好的選擇,所以筆者選擇使用vscode來搭建django框架實現的個人博客。
4. [FE] React 初窺門徑(三):用 VSCode 調試 Web 應用
參考 React 初窺門徑(一):環境准備
我們已經准備好了兩個目錄(並設置成了 環境變數):
並設置好了軟連接
參考 React 初窺門徑(二):構建過程
我們對 React 的構建過程進行了調試
並且借用了 VSCode 插件 CodeTour 記錄了源碼學習過程
本文豐富了 github: thzt/react-tour v17.0.2 的內容,增加了幾個文件,
我們主要來介紹 .vscode/ 中的 Debug React 配置 .vscode/launch.json
參數說明,
我們在 React 構建產物文件 ReactProject/build/node_moles/react/index.js 中打個端點,
然後啟動 VSCode Debug React 進行調試,
VSCode 會打開 Chrome 並訪問 http://127.0.0.1:3000 ,
斷點定位到了 ReactProject/build/node_moles/react/index.js 第 6 行
這樣我們就可用 VSCode 調試 ExampleProject 應用了。
會載入 react 和 react-dom ,
載入過程通過 CodeTour 寫到了這里 github: thzt/react-tour v17.0.2
我們大致看了一遍 react.development.js 和 react-dom.devlopment.js 兩個文件的內容,
其中各個方法的具體邏輯,等到實際用到再看。
React 初窺門徑(一):環境准備
React 初窺門徑(二):構建過程
github: thzt/react-tour v17.0.2
5. vscode 如何添加 外部web伺服器
在要添加webservice的項目名稱上右擊,在右擊菜單中選擇添加服務引用
在彈出的窗口中可以輸入服務的地址
可以引用解決方案中的服務,點擊按鈕發現
也可以點擊高級按鈕來專門添加webservice
在彈出的窗口中點擊 添加web引用
在彈出窗口中可以輸入web服務的地址,或者通過其他三種方式尋找web服務
比如引用解決方案中的web服務,點擊此處,在出現的列表中選擇要引用的服務
在出現的窗口中點擊 添加引用即可
6. 如何用vscode調試webpack
打開vs
code,從命令行打開預先定義的文件夾,如:
e:\netcore\demo;
使用快鍵鍵調出命令行窗口,ctrl
+
`;
其實這里有兩種方式,直接通過windows
命令行也是一樣的。前提是安裝了
.net
core
sdk.
7. Flutter搭建Web應用
Flutter需要1.5.4以上的版本,先升級一下:
切換到master分支:
編譯web端需要官方提供的工具flutter_web:
安裝完成以後會有一個警告:
需要配置一下環境變數:
立即生效:
webdev在命令行敲一下看看安裝成功沒,如果報 flutter/.pub-cache/bin/webdev: line 7: dart: command not found,是因為dart-sdk環境沒配置好:
再加一行:
VSCode里創建新項目,目錄里會多一個web:
此時可以在設備里選擇chrome進行調試:
或者在項目目錄下執行:
8. 如何用vscode調試webpack
1.安裝node,因為ts的編譯器是js/ts寫的; 安裝node後同時獲得npm命令,這是nodejs世界裡的包管理器(也可以看作node的app商店); 2.安裝vs 2015或者vs code,當然這不是必須的,但是這里強烈推薦寫ts的工具,
9. vscodeweb怎麼用代碼插圖
1、首先在EXTENSIONS搜索carbon-now-sh,然後安裝該插件。
2、其次新建一個文件,編寫一些測試的代碼,代碼的話是不分語言的。接著選擇需要生成圖片的代碼片段,滑鼠右鍵然後選擇CommandPalette或者是直接用快捷鍵(Windows-Ctrl+Shift+P,Mac-Cmd+Shift+P)。命令托盤打開之後在輸入框輸入Carbon然後回車,插件會自動打開瀏覽器的頁面。
3、然後在圖片生成界面我們可以自己根據情況進行設置,包括背景顏色以及語言等。
4、最後設置好之後我們選擇Export然後設置名稱以及大小,在這里還可以選擇下載的圖片類型,現在暫時支持jpg以及SVG兩種,然後會自動下載到本地,這樣就完成了代碼轉圖片的過程。
10. vscode 插件可視化製作和管理腳手架及原理解析
提到腳手架,大家想到的可能就是各種 xxx-cli,本文介紹的是另一種方式:以 vscode 插件的形式實現,提供 web 可視化操作,如下圖:
下面介紹如何安裝使用,以及實現原理。
vscode 安裝 lowcode 插件,此插件是一個效率工具,腳手架只是其中一個功能,更多功能可以查看 文檔 ,這集只講腳手架相關的。
插件安裝之後,打開腳手架界面,步驟如下圖:
可以直接使用分享的腳手架,勾選選項後直接創建即可:
在模板項目根目錄下創建 lowcode.scaffold.config.json 文件,將需要做內容動態替換的文件加上 .ejs 後綴。
ejs 語法
一個完整 lowcode.scaffold.config.json 配置:
formSchema :
formSchema.schema 為 x-render 表單設計器 導出的的 schema,會根據 schema 構建出表單界面, formSchema.formData 為表單默認數據
創建項目的時候會將表單數據傳入 ejs 模板中進行編譯。
excludeCompile :配置不需要經過 ejs 編譯的文件夾或文件。
conditionFiles :根據表單項的值,在創建項目的時候將某些文件夾或文件刪除,比如:
當 lint 這個表單項的值為 false 的時候,配置的文件夾或文件 ".eslintrc.js",".prettierrc.js",將會在創建的項目中排除掉。
https://github.com/lowcode-scaffold/lowcode-mock
將腳手架提交到 git 倉庫,注意開放項目的公開訪問許可權。
修改 倉庫 中 index.json 內容,提交 pr。
下集再說插件其他功能,插件源碼: https://github.com/lowcoding/lowcode-vscode