国产学生粉嫩无套内射,久久伊人精品一区二区三区,人妻夜夜爽天天爽三区丁香花

史上最全vscode配置使用教程

工欲善其事，必先利其器。想要優(yōu)雅且高效的編寫代碼，必須熟練使用一款前端開(kāi)發(fā)工具。但前端開(kāi)發(fā)工具數(shù)不勝數(shù)，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其輕量且強(qiáng)大的代碼編輯功能和豐富的插件生態(tài)系統(tǒng)，獨(dú)受前端工師的青睞。網(wǎng)上有很多vscode的配置以及使用博客，但都沒(méi)有本篇那么詳細(xì)且全面。

首頁(yè)

vscode設(shè)置成中文

vscode默認(rèn)的語(yǔ)言是英文，對(duì)于英文不好的小伙伴可能不太友好。簡(jiǎn)單幾步教大家如何將vscode設(shè)置成中文。

按快捷鍵“Ctrl+Shift+P”。
在“vscode”頂部會(huì)出現(xiàn)一個(gè)搜索框。
輸入“configure language”，然后回車。
“vscode”里面就會(huì)打開(kāi)一個(gè)語(yǔ)言配置文件。
將“en-us”修改成“zh-cn”。
按“Ctrl+S”保存設(shè)置。
關(guān)閉“vscode”，再次打開(kāi)就可以看到中文界面了。

VScode用戶設(shè)置

1. 打開(kāi)設(shè)置

文件--首選項(xiàng)--設(shè)置，打開(kāi)用戶設(shè)置。VScode支持選擇配置，也支持編輯setting.json文件修改默認(rèn)配置。個(gè)人更傾向于編寫json的方式進(jìn)行配置，下面會(huì)附上我個(gè)人的配置代碼

這里解析幾個(gè)常用配置項(xiàng)：

（1）editor.fontsize用來(lái)設(shè)置字體大小，可以設(shè)置editor.fontsize : 14;

（2）files.autoSave這個(gè)屬性是表示文件是否進(jìn)行自動(dòng)保存，推薦設(shè)置為onFocusChange——文件焦點(diǎn)變化時(shí)自動(dòng)保存。

（3）editor.tabCompletion用來(lái)在出現(xiàn)推薦值時(shí)，按下Tab鍵是否自動(dòng)填入最佳推薦值，推薦設(shè)置為true;

（4）editor.codeActionsOnSave中的source.organizeImports屬性，這個(gè)屬性能夠在保存時(shí)，自動(dòng)調(diào)整 import 語(yǔ)句相關(guān)順序，能夠讓你的 import 語(yǔ)句按照字母順序進(jìn)行排列，推薦設(shè)置為true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；

（5）editor.lineNumbers設(shè)置代碼行號(hào),即editor.lineNumbers ：true；

我的個(gè)人配置，供參考：

{
  "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,
  // 重新設(shè)定tabsize
  "editor.tabSize": 2,
  //失去焦點(diǎn)后自動(dòng)保存
  "files.autoSave": "onFocusChange",
  // #值設(shè)置為true時(shí)，每次保存的時(shí)候自動(dòng)格式化；
  "editor.formatOnSave": false,
   //每120行就顯示一條線
  "editor.rulers": [
  ],
  // 在使用搜索功能時(shí)，將這些文件夾/文件排除在外
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/target": true,
      "**/logs": true,
  }, 
  // 這些文件將不會(huì)顯示在工作空間中
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/*.js": {
          "when": "$(basename).ts" //ts編譯后生成的js文件將不會(huì)顯示在工作空中
      },
      "**/node_modules": true
  }, 
  // #讓vue中的js按"prettier"格式進(jìn)行格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
          // #vue組件中html代碼格式化樣式
          "wrap_attributes": "force-aligned", //也可以設(shè)置為“auto”，效果會(huì)不一樣
          "wrap_line_length": 200,
          "end_with_newline": false,
          "semi": false,
          "singleQuote": true
      },
      "prettier": {
          "semi": false,
          "singleQuote": true
      }
  }
}

常用的快捷鍵

高效的使用vscode,記住一些常用的快捷鍵是必不可少的，我給大家羅列了一些日常工作過(guò)程中用的多的快捷鍵。

以下以Windows為主，windows的 Ctrl，mac下?lián)Q成Command就行了

對(duì)于行的操作：

重開(kāi)一行：光標(biāo)在行尾的話，回車即可；不在行尾，ctrl+ enter 向下重開(kāi)一行；ctrl+shift + enter 則是在上一行重開(kāi)一行
刪除一行：光標(biāo)沒(méi)有選擇內(nèi)容時(shí)，ctrl+ x 剪切一行；ctrl +shift + k 直接刪除一行
移動(dòng)一行：alt + ↑ 向上移動(dòng)一行；alt + ↓ 向下移動(dòng)一行
復(fù)制一行：shift + alt + ↓ 向下復(fù)制一行；shift + alt + ↑ 向上復(fù)制一行
ctrl + z 回退

對(duì)于詞的操作：

選中一個(gè)詞：ctrl+ d

搜索或者替換：

ctrl+ f ：搜索
ctrl+ alt + f：替換
ctrl+ shift + f：在項(xiàng)目?jī)?nèi)搜索

通過(guò)**Ctrl + ` **可以打開(kāi)或關(guān)閉終端

Ctrl+P 快速打開(kāi)最近打開(kāi)的文件

Ctrl+Shift+N 打開(kāi)新的編輯器窗口

Ctrl+Shift+W 關(guān)閉編輯器

Home 光標(biāo)跳轉(zhuǎn)到行頭

End 光標(biāo)跳轉(zhuǎn)到行尾

Ctrl + Home 跳轉(zhuǎn)到頁(yè)頭

Ctrl + End 跳轉(zhuǎn)到頁(yè)尾

Ctrl + Shift + [ 折疊區(qū)域代碼

Ctrl + Shift + ] 展開(kāi)區(qū)域代碼

Ctrl + / 添加關(guān)閉行注釋

Shift + Alt +A 塊區(qū)域注釋

插件安裝

必備插件

1、View In Browser

在瀏覽器里預(yù)覽網(wǎng)頁(yè)必備。

2、vscode-icons

改變編輯器里面的文件圖標(biāo)

3、Bracket Pair Colorizer

給嵌套的各種括號(hào)加上不同的顏色。

4、Auto Rename Tag

自動(dòng)修改匹配的 HTML 標(biāo)簽。

5、Path Intellisense

智能路徑提示，可以在你輸入文件路徑時(shí)智能提示。

6、Markdown Preview

實(shí)時(shí)預(yù)覽 markdown。

7、stylelint

CSS / SCSS / Less 語(yǔ)法檢查

8、Import Cost

引入包大小計(jì)算,對(duì)于項(xiàng)目打包后體積掌握很有幫助

9、Prettier

比Beautify更好用的代碼格式化插件

Vue插件

vetur

語(yǔ)法高亮、智能感知、Emmet等

VueHelper

snippet代碼片段

其它插件

1、CSScomb

CSS 書寫順序規(guī)則，這里我推薦騰訊 AollyTeam 團(tuán)隊(duì)的規(guī)范：

http://alloyteam.github.io/CodeGuide/#css-declaration-order?alloyteam.github.io

簡(jiǎn)單說(shuō)下這個(gè)插件怎么用：

在項(xiàng)目的根目錄下創(chuàng)建一個(gè)名為csscomb.json的文件，然后添加一些配置項(xiàng)。也可以將配置項(xiàng)寫入項(xiàng)目的 package.json 文件中的 csscombConfig 字段。

至于添加的配置項(xiàng)，CSScomb 提供了示例配置文件：

https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json?github.com

其中的 sort-order 就是 CSS 屬性書寫順序，可以按照自己遵循的規(guī)范設(shè)置，所以我直接替換成了騰訊的。

這個(gè)配置文件里面各個(gè)字段的作用可以戳這里查看：

csscomb/csscomb.js?github.com

2、Turbo Console Log

快捷添加 console.log，一鍵注釋 / 啟用 / 刪除所有 console.log。這也是我最常用的一個(gè)插件

簡(jiǎn)單說(shuō)下這個(gè)插件要用到的快捷鍵:

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

3、GitLens

詳細(xì)的 Git 提交日志。

Git 重度使用者必備，尤其是多人協(xié)作時(shí)：哪一行代碼，何時(shí)、何人提交都有記錄。

媽媽再也不用擔(dān)心我背鍋了！

4、css-auto-prefix

自動(dòng)添加 CSS 私有前綴。

5、change-case

轉(zhuǎn)換命名風(fēng)格。

6、CSS Peek

定位 CSS 類名。

7、vscode-json

處理 JSON 文件，用法看圖：

8、Regex Previewer

實(shí)時(shí)預(yù)覽正則表達(dá)式的效果。

設(shè)置同步

花了一天終于把vscode配置成自己滿意的樣子，如果每換一次電腦就要重新來(lái)一次，大家一定會(huì)手撕了我。放心，早就幫大家準(zhǔn)備好了。Settings Sync，在不同電腦間同步你的插件。

首先要想在不同的設(shè)備間同步你的插件, 需要用到 Token 和Gist id

Token 就是你把插件上傳到 github 上時(shí), 讓你保存的那段字符，Gist id 在你上傳插件的那臺(tái)電腦上保存著。

先給大家來(lái)三個(gè)快捷鍵，后面會(huì)用到

1、CTRL+SHIFT+P 我也不知道叫什么，暫且就叫它功能搜索功能吧
2、ALT+SHIFT+D 下載配置
3、ALT+SHIFT+U 上傳配置

現(xiàn)在手把手教大家配置：

1、安裝Settings Sync
2、登陸Github>settings>Developer settings>personal access tokens>generate new token，輸入名稱，勾選Gist，提交

3、保存Github Access Token
4、打開(kāi)vscode，Ctrl+Shift+P打開(kāi)命令框-->輸入sync-->選擇高級(jí)設(shè)置-->編輯本地?cái)U(kuò)展設(shè)置-->編輯token

5、Ctrl+Shift+P打開(kāi)命令框-->輸入sync-->找到update/upload settings，上傳成功后會(huì)返回Gist ID，保存此Gist ID.

image

6、在 VSCode 里，依次打開(kāi): 文件 -> 首選項(xiàng) -> 設(shè)置，然后輸入 Sync 進(jìn)行搜索:能找到你gist id

image

7、若需在其他機(jī)器上DownLoad插件的話，同樣，Ctrl+Shift+P打開(kāi)命令框，輸入sync，找到Download settings，會(huì)跳轉(zhuǎn)到Github的Token編輯界面，點(diǎn)Edit，regenerate token，保存新生成的token，在vscode命令框中輸入此Token，回車，再輸入之前的Gist ID，即可同步插件和設(shè)置

http-server 開(kāi)啟一個(gè)本地服務(wù)

在寫前端頁(yè)面中，經(jīng)常會(huì)在瀏覽器運(yùn)行HTML頁(yè)面，從本地文件夾中直接打開(kāi)的一般都是file協(xié)議，當(dāng)代碼中存在http或https的鏈接時(shí)，HTML頁(yè)面就無(wú)法正常打開(kāi)，為了解決這種情況，需要在在本地開(kāi)啟一個(gè)本地的服務(wù)器。本文是利用node.js中的http-server，開(kāi)啟本地服務(wù)，步驟如下：

安裝http-server

在終端輸入： $ npm install http-server -g

開(kāi)啟 http-server服務(wù)

終端進(jìn)入目標(biāo)文件夾，然后在終端輸入：

$ http-server -c-1   （??只輸入http-server的話，更新了代碼后，頁(yè)面不會(huì)同步更新）
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.8.196:8080
Hit CTRL-C to stop the server

關(guān)閉 http-server服務(wù)

按快捷鍵CTRL-C 終端顯示^Chttp-server stopped.即關(guān)閉服務(wù)成功。

??關(guān)注+點(diǎn)贊+收藏+評(píng)論+轉(zhuǎn)發(fā)??，原創(chuàng)不易，鼓勵(lì)筆者創(chuàng)作更好的文章

前端書籍、獨(dú)家入門學(xué)習(xí)路線+精品課程、前端進(jìn)階課程、前端大廠寶典、前端面試技巧，前端高級(jí)vue源碼解析+react服務(wù)端渲染，，都可以點(diǎn)擊下面的閑魚鏈接進(jìn)行購(gòu)買

也可以添加我的私人微信進(jìn)行購(gòu)買：yun1015911204 (請(qǐng)備注：前端碼頭)

掃碼添加我的微信

獨(dú)家入門學(xué)習(xí)路線+視頻 ?閑魚鏈接

前端進(jìn)階獨(dú)家學(xué)習(xí)路線+視頻 ?閑魚鏈接

前端高級(jí)精品課程?+視頻閑魚鏈接

image

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

史上最全vscode配置使用教程

史上最全vscode配置使用教程

vscode設(shè)置成中文

VScode用戶設(shè)置

常用的快捷鍵

插件安裝

2、vscode-icons

3、Bracket Pair Colorizer

4、Auto Rename Tag

5、Path Intellisense

6、Markdown Preview

7、stylelint

8、Import Cost

9、Prettier

Vue插件

vetur

VueHelper

其它插件

4、css-auto-prefix

5、change-case

8、Regex Previewer

設(shè)置同步

http-server 開(kāi)啟一個(gè)本地服務(wù)

安裝http-server

關(guān)閉 http-server服務(wù)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

史上最全vscode配置使用教程

vscode設(shè)置成中文

VScode用戶設(shè)置

常用的快捷鍵

插件安裝

2、vscode-icons

3、Bracket Pair Colorizer

4、Auto Rename Tag

5、Path Intellisense

6、Markdown Preview

7、stylelint

8、Import Cost

9、Prettier

Vue插件

vetur

VueHelper

其它插件

4、css-auto-prefix

5、change-case

8、Regex Previewer

設(shè)置同步

http-server 開(kāi)啟一個(gè)本地服務(wù)

安裝http-server

關(guān)閉 http-server服務(wù)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频