2020-前端vscode配置


設置中文

常用的快捷鍵

前端插件

 

 

設置中文

 

1 按快捷鍵“Ctrl+Shift+P”。 2 在“vscode”頂部會出現一個搜索框。 3 輸入“configure language”,然后回車。 4 “vscode”里面就會打開一個語言配置文件。 5 將“en-us”修改成“zh-cn”。 6 按“Ctrl+S”保存設置。 7 關閉“vscode”,再次打開就可以看到中文界面了。

 如果上述方式不行可能版本問題可以試試這樣:

 

 


 

常用快捷鍵

重開一行:光標在行尾的話,回車即可;不在行尾,ctrl + enter 向下重開一行;ctrl+shift + enter 則是在上一行重開一行
刪除一行:光標沒有選擇內容時,ctrl + x 剪切一行;ctrl +shift + k 直接刪除一行
移動一行:alt + ↑ 向上移動一行;alt + ↓ 向下移動一行
復制一行:shift + alt + ↓ 向下復制一行;shift + alt + ↑ 向上復制一行
ctrl + z 回退
對於 詞 的操作:

選中一個詞:ctrl + d
搜索或者替換:

ctrl + f :搜索
ctrl + alt + f: 替換
ctrl + shift + f:在項目內搜索
通過Ctrl + ` 可以打開或關閉終端

Ctrl+P 快速打開最近打開的文件

Ctrl+Shift+N 打開新的編輯器窗口

Ctrl+Shift+W 關閉編輯器

Home 光標跳轉到行頭

End 光標跳轉到行尾

Ctrl + Home 跳轉到頁頭

Ctrl + End 跳轉到頁尾

Ctrl + Shift + [ 折疊區域代碼

Ctrl + Shift + ] 展開區域代碼

Ctrl + / 添加關閉行注釋

Shift + Alt +A 塊區域注釋

前端插件

插件名 作用
View In Browser 在瀏覽器里預覽網頁必備。
vscode-icons 改變編輯器里面的文件圖標
Bracket Pair Colorizer 給嵌套的各種括號加上不同的顏色。
Auto Rename Tag 自動修改匹配的 HTML 標簽。
Path Intellisense 智能路徑提示,可以在你輸入文件路徑時智能提示。
Markdown Preview 實時預覽 markdown。
stylelint CSS / SCSS / Less 語法檢查
Import Cost 引入包大小計算,對於項目打包后體積掌握很有幫助

Prettier

代碼格式化插件
vetur 高亮等(目前沒到這個提示代碼,據說可以我用的 vue snippet)
VueHelper

告訴你這個代碼塊作用

CSScomb CSS 書寫順序規則(有興趣可以看我底部分享的外鏈)
Turbo Console Log 快捷添加 console.log,一鍵 注釋 / 啟用 / 刪除 所有 console.log。
GitLens 多人協作記錄,每一行代碼,時間,作者,都有記錄
css-auto-prefix 對某些需要的css自動添加 css私有前綴。-webkit -moz -ms 這些會自動被加入到你的css中。
change-case

轉換命名風格。(比如駝峰轉橫杠)

CSS Peek 從htmlcss類名找到對應的css類名的定義
vscode-json 對json做美化或者校驗等
Regex Previewer 實時預覽正則表達式    
eslint   幫你檢查並且規范代碼(可以設置讓你的文檔保存的時候符合規范)

 

Turbo Console Log 快捷鍵:

ctrl + alt + l 選中變量之后,使用這個快捷鍵生成 console.log
alt + shift + c 注釋所有 console.log
alt + shift + u 啟用所有 console.log
alt + shift + d 刪除所有 console.log

這是我現在vs中的所有插件對我來說夠用。但是看到一篇好文章寫的很不錯稍微整理下存放於博客。

 

 

更詳細的內容參考:史上最全vscode配置使用教程 - 灰藍宇墨的文章 - 知乎 

 

 

 

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM