摘要:注本文首發在我的個人博客最近有個項目使用了,本來一直使用的是來進行開發,可是遇到了很多問題。此外,還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。,終于基本搞定了,可以愉快地開發應用了。
注:本文首發在 我的個人博客
最近有個項目使用了 Vue.js ,本來一直使用的是 PHPStorm 來進行開發,可是遇到了很多問題。
后來,果斷放棄收費的 PHPStorm ,改用 vscode (Visual Stdio Code).
當然 vscode 對 vue 也不是原生支持的,今天來扒一扒如何配置 vscode 以便優雅地編輯 vue 文件
vue文件雖然可以通過插件來解決高亮問題,但是 標簽中的 ES6 代碼的識別老是出問題,箭頭函數有的時候能正確識別,有的時候會報錯
無法正確識別 vue 文件中的 jsx 語法
無法正確識別和高亮 vue 文件 標簽中使用的 less 語法
vue文件中 部分使用了大量的自定義標簽(自定義組件)和自定義屬性,會報一堆 warning
經常性卡死
webpack實時編譯的錯誤不能直接展示在代碼編輯器內,還得自己到控制臺中查看
如何安裝 vscode很簡單,傳送門:官網下載安裝
第一步,要支持 vue 文件的基本語法高亮這里,我試過好3個插件: vue, VueHelper 和 vetur ,最終選擇使用 vetur 。
安裝插件: Ctrl + P 然后輸入 ext install vetur 然后回車點安裝即可。
p.s: vscode 的插件安裝比 PHPStorm 的插件安裝更快捷方便,安裝完成后還不用重啟整個程序,只要重新加載下工作區窗口就可以了。
安裝完 vetur 后還需要加上這樣一段配置下:
"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }
這時可以打開一個vue文件試試,注意下右下角狀態欄是否正確識別為 vue 類型:
如果被識別為 text 或 html ,則記得要點擊切換下。
第二步,要支持 vue 文件的 ESLint可能還有人會問為什么要 ESLint ?沒有 lint 的代碼雖然也可能可以正確運行,但是 lint 作為編譯前的一道檢測成本更小,而且更快。此外, ESLint 還有很多規范是幫助我們寫出更加優雅而不容易出錯的代碼的。
jshint 本來也是個不錯的選擇,但是 ESLint 對 jsx 的支持讓我還是選擇了 ESLint.
安裝插件: Ctrl + P 然后輸入 ext install eslint 然后回車點安裝即可。
ESLint 不是安裝后就可以用的,還需要一些環境和配置:
首先,需要全局的 ESLint , 如果沒有安裝可以使用 npm install -g eslint 來安裝。
其次,vue文件是類 HTML 的文件,為了支持對 vue 文件的 ESLint ,需要 eslint-plugin-html 這個插件。可以使用 npm install -g eslint-plugin-html 來安裝
接著,安裝了 HTML 插件后,還需要在 vscode 中配置下 ESLint:
"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { "plugins": ["html"] },
最后,別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建,還可以使用下面快捷命令來創建:
這樣一來 vue 中寫的 js 代碼也能正確地被 lint 了。
要是不小心少個括號之類的都可以有對應的報錯:
多余 import 也都能報錯:
還是蠻智能的。
第三步,配置構建任務vue 項目的構建我選擇用 webpack ,不過,并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 寫的 node 腳本。 腳本主要有兩個,一個是 build/bin/build.js 另一個是 build/bin/watch.js 分別是單次構建和實時構建。
于是乎,對應 vscode 中的 tasks 也是有兩個: build 和 watch ,簡單配置如下:
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format // use `Ctrl+P` and type `task` + SPACE +to run a task "version": "0.1.0", "tasks": [ { "taskName": "build", "echoCommand": true, "command": "node", "args": [ "build/bin/build.js" ], "suppressTaskName": true, "isBuildCommand": true }, { "taskName": "watch", "echoCommand": true, "command": "node", "args": [ "build/bin/watch.js" ], "suppressTaskName": true, "isBackground": true } ] }
這樣配置好后,按 Ctrl + Shift + B 即可開始單次構建。 不過單次構建比較慢(要10秒+),一般我都用實時構建:Ctrl + P 然后輸入 task watch <回車> 即可開始實時構建。實時構建除了第一次比較慢,其他時候還是非常快的,一般1秒內就可以構建好。
最后,webpack 構建錯誤提示webpack 構建失敗后一般都會有錯誤提示,會顯示在輸出窗口中:
為啥是彩色的? 因為裝了 Output Colorizer 這個插件。
當然,這樣還是不夠方便 -- 實時構建是后臺運行的,“輸出”窗口一般也都是在后臺,每次保存完文件還得點開豈不麻煩。
要是能做到像 ESLint 一樣直接把錯誤標到編輯器上面就好了。真的可以嗎?翻了下 vscode 的文檔,發現有神奇的 problemMatcher -- 可以對任務輸出進行解析,解析出的問題會顯示在“問題”窗口中,如果還有文件名行號和列號,則會在源代碼編輯窗口中對應的位置標出來。
先放個最終效果:
在這個文件的第32行,import 了一個不存在的模塊,這樣的錯誤在 ESLint 中當然是檢查不出來的,然而在 webpack 的實時構建中會報錯:
這個事情的困難在于兩點:
如何通過 problemMatcher 把這個錯誤給抓出來?
如何找到錯誤對應的行號?(如果可能的話,還有列號)
webpack的錯誤輸出格式并不是完全統一的,而且有些還沒有行號 -- 一方面可能是 webpack 的 bug ,另一方面 vue 文件在構建的時候會拆成 template, script 和 style 三個方面進行構建,報錯的行號可能對不上。
最終我的解決方案是對 webpack 的錯誤重新格式化輸出,然后匹配:
首先,重新格式化輸出需要 format-webpack-stats-errors-warnings 這個包(偶新寫的)
npm install --save-dev format-webpack-stats-errors-warnings
然后,到 build/bin/build.js 和 build/bin/watch.js 中在 webpack 構建完成的回調函數中增加這個格式化后的輸出:
更多使用介紹見 github
最后,在 .vscode/tasks.json 中,每個任務下添加 problemWatcher:
// ... { "taskName": "build", // ... // build 任務的: "problemMatcher": { "owner": "webpack", "fileLocation": [ "relative", "${workspaceRoot}" ], "pattern": { "regexp": "^!>(w+): (S+)?:(d+),(d+)(?:~(?:(d+),)?(d+))?: (.*)$", "severity": 1, "file": 2, "line": 3, "column": 4, "endLine": 5, "endColumn": 6, "message": 7 } } } { "taskName": "watch", // ... // watch 任務的: "problemMatcher": { "owner": "webpack", "fileLocation": [ "relative", "${workspaceRoot}" ], "pattern": { "regexp": "^!>(w+): (S+)?:(d+),(d+)(?:~(?:(d+),)?(d+))?: (.*)$", "severity": 1, "file": 2, "line": 3, "column": 4, "endLine": 5, "endColumn": 6, "message": 7 }, "watching": { "activeOnStart": true, "beginsPattern": "^s*Webpack begin run", "endsPattern": "^s*Build complete at" } } // ... } // ...
注:在 watch 任務中,為了匹配何時開始和何時結束,我在 webpack 構建的 run 和 watch 時增加了一個 console.log("Webpack begin run") 的打印,而在構建完成后增加了一個 console.log("Build complete at ..") 的打印。
OK,終于基本搞定了 vscode ,可以愉快地開發 vue 應用了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82106.html
摘要:如果編輯器在編碼時實時給出反饋,對開發者個人而言才是最高效的,在提交時做強制檢查只是從團隊的視角保證編碼風格的規范性和一致性。 工欲善其事必先利其器,軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來,先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,現在...
摘要:如果編輯器在編碼時實時給出反饋,對開發者個人而言才是最高效的,在提交時做強制檢查只是從團隊的視角保證編碼風格的規范性和一致性。 工欲善其事必先利其器,軟件工程師每天打交道最多的可能就是編輯器了。入行幾年來,先后折騰過的編輯器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,現在...
摘要:詳細具體的使用可以見文章手摸手,帶你優雅的使用。為了加速線上鏡像構建的速度,我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像,避免每次都需要重新下載。 完整項目地址:vue-element-admin系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列四(vueAdmin 一...
摘要:使用高亮類似的擴展更強大的高亮擴展,具有更多功能。為了檢查和檢查響應,使用了之類的工具。在這里獲取這兩個擴展自動閉合標記和自動重命名標記。類似的擴展顯示提交歷史的精美圖表等等。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你! Quokka.js Quokka.js 是一個用于 JavaScript 和 TypeScript 的實時運行代碼平臺。這意味著它會實時運行...
摘要:對于項目的編碼規范而言,主要有兩種選擇和。此外由于性能問題,官方決定全面采用,甚至把倉庫作為測試平臺,而的解析器也成為獨立項目,專注解決雙方兼容性問題。最近在我的項目的編碼規范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規范而言,主要有兩種選擇ESLint和TSLint。ESLint不僅能規范js代碼,通過配置解析器,也能規范TS代碼。此外由...
閱讀 3338·2023-04-26 03:05
閱讀 1458·2019-08-30 13:09
閱讀 1907·2019-08-30 13:05
閱讀 886·2019-08-29 12:42
閱讀 1385·2019-08-28 18:18
閱讀 3446·2019-08-28 18:09
閱讀 512·2019-08-28 18:00
閱讀 1712·2019-08-26 12:10