欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VSCode怎么用? 史上超全vscode配置使用教程

  發(fā)布時(shí)間：2023-12-22 14:46:01   作者：佚名   我要評論
VSCode是輕量且強(qiáng)大的代碼編輯，很多朋友不知道怎么下載VSCode使用，下面我們就來看看史上超全vscode配置使用教程

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

軟件下載

直接在官網(wǎng)進(jìn)行下載，后者下載我們準(zhǔn)備好的。

首頁

vscode設(shè)置成中文

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

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

當(dāng)然如果你不愿意設(shè)置，也可以直接安裝它的中文插件，還是很人性化的。

VScode用戶設(shè)置

1. 打開設(shè)置

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

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

  • （1）editor.fontsize用來設(shè)置字體大小，可以設(shè)置editor.fontsize : 14;
  • （2）files.autoSave這個(gè)屬性是表示文件是否進(jìn)行自動(dòng)保存，推薦設(shè)置為onFocusChange——文件焦點(diǎn)變化時(shí)自動(dòng)保存。
  • （3）editor.tabCompletion用來在出現(xiàn)推薦值時(shí)，按下Tab鍵是否自動(dòng)填入最佳推薦值，推薦設(shè)置為on;
  • （4）editor.codeActionsOnSave中的source.organizeImports屬性，這個(gè)屬性能夠在保存時(shí)，自動(dòng)調(diào)整 import 語句相關(guān)順序，能夠讓你的 import 語句按照字母順序進(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
      }
  }
}

最近經(jīng)常有人微信問我，這個(gè)配置代碼寫在哪里？

新版的vscode設(shè)置默認(rèn)為UI的設(shè)置，而非之前的json設(shè)置。如果你想復(fù)制我上面這段代碼進(jìn)行配置，可以進(jìn)行下面的修改

文件>首選項(xiàng)>設(shè)置 > 搜索workbench.settings.editor，選中json即可改成json設(shè)置；

禁用自動(dòng)更新

文件 > 首選項(xiàng) > 設(shè)置（macOS：代碼 > 首選項(xiàng) > 設(shè)置，搜索update mode并將設(shè)置更改為none。

開啟代碼提示設(shè)置

第一步：點(diǎn)擊左下角點(diǎn)擊設(shè)置圖標(biāo)，找到并點(diǎn)擊“setting”

第二步：到搜索框里搜索“prevent”--->并取消此項(xiàng)的勾選

常用的快捷鍵

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

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

對于 行 的操作：

  • 重開一行：光標(biāo)在行尾的話，回車即可；不在行尾，ctrl + enter 向下重開一行；ctrl+shift + enter 則是在上一行重開一行
  • 刪除一行：光標(biāo)沒有選擇內(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 回退

對于 詞 的操作：

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

搜索或者替換：

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

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

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

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

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

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

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

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

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

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

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

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

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

插件安裝

在輸入框中輸入想要安裝的插件名稱，點(diǎn)擊安裝即可。安裝后沒有效果，可以重啟vscode

必備插件1、open in browser

在瀏覽器里預(yù)覽網(wǎng)頁必備。運(yùn)行html文件

View In Browser 已被棄用，可以使用open in browser 直接運(yùn)行html文件

2、vscode-icons

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

3、Auto Rename Tag

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

4、Path Intellisense

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

5、Markdown Preview

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

6、stylelint

CSS / SCSS / Less 語法檢查

7、Import Cost

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

相關(guān)文章

最新評論