碼上歡樂
相關內容    簡體    繁體

VsCode從零開始配置一個屬於自己的Vue開發環境

本文轉載自   查看原文   2021-03-15 17:32   390    編輯器、打包等
 

相關插件

Vetur

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur
Vetur不用說了吧，開發Vue必裝的一個插件
未安裝之前vue文件顯示這樣的
image.png
安裝完成后顯示這樣的，看着舒服多了
image.png

Vue 2 Snippets

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
主要加強vue的便捷寫法
demo1.gif

demo2.gif

language-stylus

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus
寫stylus用的，如果項目用的stylus寫樣式推薦安裝，其他Sass、LESS等同理安裝相應的插件即可。

Auto Close Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
自動閉合標簽所用
demo3.gif
配合快捷鍵Alt+. (Command+Alt+. for Mac)特別好使。
demo4.gif

Auto Rename Tag

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
自動修改重命名配對的標簽

Bookmarks

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
可以對成片的代碼做一些書簽標記，方便后續查看。
demo5.gif

Bracket Pair Colorizer

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
對括號進行着色，方便區分，下面的圖分別是安裝前后的比較
image.png

image.png

Copy Relative Path

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path
用於復制文件的完整路徑和相對路徑，有時候我們可能需要復制一些文件的路徑，該插件就很方便了。
demo6.gif

Path Intellisense

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
路徑自動感知，在配置文件中配置@后我們就可以很方便快捷的引用各種文件了

"path-intellisense.mappings": { "@": "${workspaceRoot}/src" }

demo7.gif

Document This

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis
主要用於方法的注釋，選中方法名，按住Ctrl+Alt后按兩次D,即可快速生成標准的注釋
demo8.gif

psioniq File Header

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header
按住Ctrl+Alt后按兩次H既可快速在文件的頭部生成注釋信息，如果對默認的注釋模板不滿意的話，可以在配置文件中自定義注釋模板

"psi-header.templates": [ { "language": "*", "template": [ "FileName: <<filename>>", "Remark: <<filename>>", "Project: <<projectname>>", "Author: <<author>>", "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>", "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>", "Modified By: <<author>>" ] } ]

demo9.gif

demo10.gif

Vue Peek

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
用於Vue快速查看組件定義以及組件跳轉，具體使用見插件文檔地址中的使用方法。
demo11.gif

JavaScript (ES6) code snippets

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
用於快速生成ES6代碼片段
demo12.gif

Material Icon Theme

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material風格的icon文件圖標，可以看下安裝前后的區別。
image.pngimage.png

ESLint

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
這個不用多說了，規范代碼格式的。

StandardJS - JavaScript Standard Style

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs
作為一個合格的前端開發，得遵循一定得代碼規范，這里推薦StandardJS，配合該插件可以自動將你的代碼格式化成規范的代碼。

vue-cli-3腳手架創建項目的時候，可以選擇這個規范。

demo13.gif

Beautify

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
主要拿它來格式話html的，也可以格式話vue`template中的html<br />配合vetur插件，需要做些設置,格式化html支持以下四種模式auto|force|force-aligned|force-expand-multiline`

"vetur.format.defaultFormatterOptions": { //beautify設置 "js-beautify-html": { "wrap_attributes_indent_size": 2, "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline } }

auto模式

image.png

force模式

demo15.gif

force-aligned模式

demo16.gif

force-expand-multiline模式

demo17.gif

vscode-element-helper

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper
用element-ui的，應該都知道這個插件，功能看圖就知道了。

Version Lens

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens
顯示npm，jspm，bower，dub和dotnet核心的軟件包版本信息

image.png

One Dark Pro

插件文檔地址：https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
一款熱門的主題，安裝前后比較。
image.png

image.png

相關配置

{
    // 編輯器默認設置 "editor.tabSize": 2, // 設置2個空格統一tabSize "javascript.validate.enable": false, // 關閉默認的校驗 "workbench.editor.enablePreview": false, // 關閉文件預覽 // 引用路徑設置 "path-intellisense.mappings": { "@": "${workspaceRoot}/src", "~": "${workspaceRoot}/src", "src": "${workspaceRoot}/src" }, // standard自動保存 "standard.autoFixOnSave": true, // psioniq File Header設置 "psi-header.templates": [{ "language": "*", "template": [ "FileName: <<filename>>", "Remark: <<filename>>", "Project: <<projectname>>", "Author: <<author>>", "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>", "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>", "Modified By: <<author>>" ] }], // vetur設置 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "none", "vetur.format.defaultFormatterOptions": { //beautify設置 "js-beautify-html": { "wrap_attributes_indent_size": 2, "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline } }, // eslint設置 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], // 保存后自動格式化 "eslint.autoFixOnSave": true, "editor.formatOnSave": true, "workbench.iconTheme": "material-icon-theme", // icon圖標 "workbench.colorTheme": "One Dark Pro" // 編輯器主題 }

備份及同步

忙活半天把上面的插件都裝上及配置好，下次換新電腦的時候總不能重新再來一遍吧，所以壓軸插件登場
Settings Sync
插件文檔地址：https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
安裝完成后需要做些其他事情：

創建GitHub Gist ID

點我去創建
image.png
創建完成后有個提示，一定要將紅色框所示的token記錄下來，不然下次就看不到了。
image.png

上傳設置

按Shift + Alt + U，會出現一個出入token的框，將上面我們創建的token輸入后回車。
image.png
完成后會給你生成一個GIST ID，將這個GIST ID記錄下來，下次需要在其他電腦上恢復數據的時候需要用到。
image.png

完整步驟Gif

下載設置

按Shift + Alt + D，它將詢問您的GitHub Gist ID（我們在步驟創建GitHub Gist ID中生成的一個ID）
在窗口中輸入該GitHub Gist ID，然后回車。

提示需要輸入您的Gist ID（上面上傳設置后生成的一個ID）

下載可能會需要點時間，完整過程Gif

插件配置

最后可以按照自己的需求配置自動上傳與自動下載

"sync.autoDownload": false,// 是否自動下載 "sync.autoUpload": false// 是否自動上傳

結語

至此教程就結束了，后面有其他問題或者有用的插件會補充進去。

vue.js visual-studio-code
 
VsCode 配置Eslint格式化代碼（vue）以及常用插件

配置eslint 插件擴展商店搜索 eslint，點擊安裝，並重新加載； 配置eslint，打開 文件==&gt;首選項==&gt;設置； 在用戶設置中插入配置代碼(支持vue): {代碼...} 此時，eslint就可以在項目中檢測代碼了 eslint檢測...

工程實戰-vue在vscode的環境配置

（1）eslint --init 然后選擇自己的代碼風格（當然，上面的配置與選擇項對應修改）（2）按照cube-ui的代碼風格設定（推薦）工程中.eslintrc.js文件

VSCode安裝與配置

安裝 在vscode官網下載版本安裝。 配置 常用插件 HTML Snippets： H5代碼片段以及提示 Auto Close Tag : 匹配標簽，關閉對應的標簽。 Auto Rename Tag : 當修改HTML/XML標簽時，會自動修改與之對應的開始/結束標...

vue.js中vue.config.js的配置說明（如：端口號、proxy...）

如果你的項目沒有vue.config.js，請在根目錄新建一個，如下圖： vue.config.js里面的代碼如下： {代碼...} 具體配置說明，請查看官方文檔：[鏈接]

VSCode 前端開發格式化配置

作為前端開發，而且有工程需要團隊協作開發的時候，代碼格式化一直是個復雜的問題。之前也使用過的 Beautify 等插件，但是效果也不太理想，而 Prettier 的出現基本解決了此問題，詳細配置如下：

 

flutter安裝開發環境-問題記錄

`^CError: Calling needs :cxx11 is disabled! There is no replacement.Please report this to the homebrew/core tap: /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/cmake.rb:23 `

 

 
 

Copyright © 2011-2021 SegmentFault. 當前呈現版本 21.03.12

浙ICP備15005796號-2浙公網安備33010602002000號ICP 經營許可 浙B2-20201554

杭州堆棧科技有限公司版權所有

 


免責聲明！

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



猜您在找 從零開始的TensorFlow + VScode 開發環境搭建 Vue+VSCode開發環境搭建 VSCode搭建VUE 開發環境 vscode配置ros開發環境 記錄vsCode配置node開發環境 VSCode Python開發環境配置 VScode 配置 c++ 開發環境 配置VSCode的Java開發環境 Vue+VSCode開發環境配置備忘（代碼格式設置） WebStorm配置Vue開發環境
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM