如何使用VS Code 開發Vue ? | vscode vue排版
VSCode是目前最受歡迎的前端開發環境,只要安裝合適的套件,就能在VSCode開發Vue,適合前後端分離時的純前端開發。VersionmacOSHighSierra10.14.2VSCode1.30.1Vue2.5.21VueCLI3.2.2Vetur0.14.4Prettier1.7.3ESLint1.7.12CopyRelativePath0.0.2PackagesVeturPrettierESLintCopyRelativePathVetur負責Vue的LSP(LanguageServiceProtocol)角色,是目前支援Vue最完整的LSP。ESLint負責Linter角色,VueCLI3目前已經整合ESLint,除了另外下 yarnlint 執行ESLint外,更可以在VSCode下即時警告。Prettier負責Formatter角色,當我們按下熱鍵 Ctr...
VS Code 是目前最受歡迎的前端開發環境,只要安裝合適的套件,就能在 VS Code 開發 Vue,適合前後端分離時的純前端開發。
VersionmacOS High Sierra 10.14.2VS Code 1.30.1Vue 2.5.21Vue CLI 3.2.2Vetur 0.14.4Prettier 1.7.3ESLint 1.7.12Copy Relative Path 0.0.2
Packages Vetur Prettier ESLint Copy Relative Path Vetur負責 Vue 的 LSP (Language Service Protocol) 角色,是目前支援 Vue 最完整的 LSP。
ESLint負責 Linter 角色,Vue CLI 3 目前已經整合 ESLint,除了另外下 yarn lint 執行 ESLint 外,更可以在 VS Code 下即時警告。
Prettier負責 Formatter 角色,當我們按下熱鍵 Ctrl + S 時,會啟動 Prettier 為我們重整 JavaScript / CSS 格式。
Copy Relative Path在 ECMAScript 2015 中,非常依賴 import module,此 package 可以幫我們自動產生相對路徑。
.eslintrc.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 module.exports = { root: true, env: { node: true, }, extends: [ plugin:vue/essential, plugin:prettier/recommended, @vue/prettier, ], rules: { no-console: process.env.NODE_ENV === production ? error : off, no-debugger: process.env.NODE_ENV === production ? e...