使Vue開發如魚得水的 VS Code 擴展
本文轉載自微信公眾號「前端有道」，作者星野丶。轉載本文請聯系前端有道公眾號。
作為一個 Vue 搬磚工，我一直在為 Vue 開發尋找合適的 VS Code 擴展。以下是一些好用的擴展，可以讓我們在搬磚時更加輕松。
目錄
- Vetur 開發Vue的童鞋必裝插件之一
- Volar 開發Vue3.0的童鞋必裝插件之一
- Simplified Language 簡體語言包
- 翻譯(英漢詞典)
- Material Icon Theme 圖標主題
- VSCode Icons 圖標主題
- Bracket Pair Colorizer 彩色的括號
- GitLens 增強Git工具
- Git History
- Path Intellisense 路徑智能提示
- Auto Rename Tag 自動關閉標簽
- Auto Close Tag 自動修改標簽名
- Code Runner 運行代碼
- Live Server 搭建本地服務器的靜態頁面
- Prettier - Code formatter 代碼格式化
- ESlint 代碼檢測
Vetur
這款插件相信不用我多說，想必大家都知道或者用過，它提供了 Vue 特定的語法語義突出顯示、代碼片段和API語法以錯誤檢查調試等。圖片
官方地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur
Volar(Vue3.0開發)
如果你的項目Vue3.0推薦用這款插件，體驗上會更好。
Volar 是一個專為 Vue 3 構建的語言支持插件，它基于@vue/reactivity按需計算 TypeScript 來優化類似于原生 TypeScript 語言服務的性能。
官方地址：https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
Chinese (Simplified) Language Pack for Visual Studio Code
這款插件把VSCode的英文轉換成中文。對我我這種英語渣渣特別剛需。而且這個是官方漢化包，理解沒毛病。
每當VS code軟件更新后，有變會英文，只需要關閉軟件重啟就行，或者重新安裝一下這款插件。
官方地址：Chinese (Simplified) Language Pack for Visual Studio Code
翻譯(英漢詞典) 代碼翻譯
在線翻譯，翻譯出來的結果真慢，吐槽。這款本地77萬詞條英漢詞典，不依賴任何在線翻譯API，無查詢次數限制，秒輸出結果。
這款插件支持駝峰、小駝峰、下劃線等等寫法來寫變量名、屬性名、類名和方法名的。
-w1205
官方地址：https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary
Material Icon Theme
非常齊全的圖標，可以說你想要包含在這里面，只截了其中一小部分圖。
-w895
官方地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
vscode-icons
這一款是VSCode官方的圖標主題包，看個人喜好選擇圖標庫。效果如下
-w330
官方地址：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Bracket Pair Colorizer
這個插件使用顏色來標識匹配的括號。代碼非常多的情況，括號也就變的非常多，如果刪除某個屬性名對象，沒有顏色區分可以就會誤刪。
不過正常來說不推薦括號寫的很多，推薦用扁平化寫法，雖然顏色區分代碼過長，看的也是腦殼疼。
官方地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
GitLens
增強Git功能構建到Visual Studio代碼可視化代碼作者一眼就通過Git指責注釋和代碼鏡頭,無縫導航和探索Git存儲庫。
官方地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git History
查看git日志、文件歷史、比較分支或提交。
當我們需要查看文件的歷史，可能會借助另外一個Git UI工具查看，耶，只要點擊文件的右上角圖標就能看到歷史代碼還有代碼差異性。
官方地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Path Intellisense 路徑智能提示
當我們需要引入某個文件或者圖片，文件夾層級可能很多，我們可以通過這款插件來提示我們當前下的文件有哪些。
官方地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Auto Rename Tag
自動重命名成對的HTML/XML標簽。
當我們修改
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Close Tag
自動添加HTML/XML關閉標簽。
當我們寫下
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Code Runner
運行代碼片段或多種語言的代碼文件，支持C、Java、JavaScript、PHP、Python等
只需要點擊鼠標右鍵，選擇 Run Code 就能得到結果
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Live Server
在本地服務器搭建自動重新加載靜態特性HTML頁面。
html頁面中鼠標右鍵選擇 open with Live Server
官方地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier - Code formatter
Prettier是一個代碼格式化程序。它通過解析代碼并使用它自己的規則重新打印代碼來強制實現一致的樣式，這些規則考慮到最大行長度，在必要時格式化代碼。
- // vscode setting.json
- {
- "editor.formatOnSave": false, // 在保存時格式化文件
- "editor.defaultFormatter": "esbenp.prettier-vscode",
- "[javascript]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- },
- "[vue]": {
- "editor.defaultFormatter": "esbenp.prettier-vscode"
- }
- }
官方地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ESlint
在一個多人協同開發的團隊中，統一的代碼編寫規范非常重要。一套規范可以讓我們編寫的代碼達到一致的風格，提高代碼的可讀性和統一性。自然維護性也會有所提高。
以下eslint規范代碼依托于 vue 官方的 eslint 規則 eslint-config-vue 做了少許的修改。大家可以按照自己的需求進行定制化配置。
- // .eslintrc.js
- module.exports = {
- root: true,
- parserOptions: {
- parser: 'babel-eslint',
- sourceType: 'module'
- },
- env: {
- browser: true,
- node: true,
- es6: true,
- },
- extends: ['plugin:vue/recommended', 'eslint:recommended'],
- // add your custom rules here
- //it is base on https://github.com/vuejs/eslint-config-vue
- rules: {
- "vue/max-attributes-per-line": [2, {
- "singleline": 10,
- "multiline": {
- "max": 1,
- "allowFirstLine": false
- }
- }],
- "vue/singleline-html-element-content-newline": "off",
- "vue/multiline-html-element-content-newline":"off",
- "vue/name-property-casing": ["error", "PascalCase"],
- "vue/no-v-html": "off",
- 'accessor-pairs': 2,
- 'arrow-spacing': [2, {
- 'before': true,
- 'after': true
- }],
- 'block-spacing': [2, 'always'],
- 'brace-style': [2, '1tbs', {
- 'allowSingleLine': true
- }],
- 'camelcase': [0, {
- 'properties': 'always'
- }],
- 'comma-dangle': [2, 'never'],
- 'comma-spacing': [2, {
- 'before': false,
- 'after': true
- }],
- 'comma-style': [2, 'last'],
- 'constructor-super': 2,
- 'curly': [2, 'multi-line'],
- 'dot-location': [2, 'property'],
- 'eol-last': 2,
- 'eqeqeq': ["error", "always", {"null": "ignore"}],
- 'generator-star-spacing': [2, {
- 'before': true,
- 'after': true
- }],
- 'handle-callback-err': [2, '^(err|error)$'],
- 'indent': [2, 2, {
- 'SwitchCase': 1
- }],
- 'jsx-quotes': [2, 'prefer-single'],
- 'key-spacing': [2, {
- 'beforeColon': false,
- 'afterColon': true
- }],
- 'keyword-spacing': [2, {
- 'before': true,
- 'after': true
- }],
- 'new-cap': [2, {
- 'newIsCap': true,
- 'capIsNew': false
- }],
- 'new-parens': 2,
- 'no-array-constructor': 2,
- 'no-caller': 2,
- 'no-console': 'off',
- 'no-class-assign': 2,
- 'no-cond-assign': 2,
- 'no-const-assign': 2,
- 'no-control-regex': 0,
- 'no-delete-var': 2,
- 'no-dupe-args': 2,
- 'no-dupe-class-members': 2,
- 'no-dupe-keys': 2,
- 'no-duplicate-case': 2,
- 'no-empty-character-class': 2,
- 'no-empty-pattern': 2,
- 'no-eval': 2,
- 'no-ex-assign': 2,
- 'no-extend-native': 2,
- 'no-extra-bind': 2,
- 'no-extra-boolean-cast': 2,
- 'no-extra-parens': [2, 'functions'],
- 'no-fallthrough': 2,
- 'no-floating-decimal': 2,
- 'no-func-assign': 2,
- 'no-implied-eval': 2,
- 'no-inner-declarations': [2, 'functions'],
- 'no-invalid-regexp': 2,
- 'no-irregular-whitespace': 2,
- 'no-iterator': 2,
- 'no-label-var': 2,
- 'no-labels': [2, {
- 'allowLoop': false,
- 'allowSwitch': false
- }],
- 'no-lone-blocks': 2,
- 'no-mixed-spaces-and-tabs': 2,
- 'no-multi-spaces': 2,
- 'no-multi-str': 2,
- 'no-multiple-empty-lines': [2, {
- 'max': 1
- }],
- 'no-native-reassign': 2,
- 'no-negated-in-lhs': 2,
- 'no-new-object': 2,
- 'no-new-require': 2,
- 'no-new-symbol': 2,
- 'no-new-wrappers': 2,
- 'no-obj-calls': 2,
- 'no-octal': 2,
- 'no-octal-escape': 2,
- 'no-path-concat': 2,
- 'no-proto': 2,
- 'no-redeclare': 2,
- 'no-regex-spaces': 2,
- 'no-return-assign': [2, 'except-parens'],
- 'no-self-assign': 2,
- 'no-self-compare': 2,
- 'no-sequences': 2,
- 'no-shadow-restricted-names': 2,
- 'no-spaced-func': 2,
- 'no-sparse-arrays': 2,
- 'no-this-before-super': 2,
- 'no-throw-literal': 2,
- 'no-trailing-spaces': 2,
- 'no-undef': 2,
- 'no-undef-init': 2,
- 'no-unexpected-multiline': 2,
- 'no-unmodified-loop-condition': 2,
- 'no-unneeded-ternary': [2, {
- 'defaultAssignment': false
- }],
- 'no-unreachable': 2,
- 'no-unsafe-finally': 2,
- 'no-unused-vars': [2, {
- 'vars': 'all',
- 'args': 'none'
- }],
- 'no-useless-call': 2,
- 'no-useless-computed-key': 2,
- 'no-useless-constructor': 2,
- 'no-useless-escape': 0,
- 'no-whitespace-before-property': 2,
- 'no-with': 2,
- 'one-var': [2, {
- 'initialized': 'never'
- }],
- 'operator-linebreak': [2, 'after', {
- 'overrides': {
- '?': 'before',
- ':': 'before'
- }
- }],
- 'padded-blocks': [2, 'never'],
- 'quotes': [2, 'single', {
- 'avoidEscape': true,
- 'allowTemplateLiterals': true
- }],
- 'semi': [2, 'never'],
- 'semi-spacing': [2, {
- 'before': false,
- 'after': true
- }],
- 'space-before-blocks': [2, 'always'],
- 'space-before-function-paren': [2, 'never'],
- 'space-in-parens': [2, 'never'],
- 'space-infix-ops': 2,
- 'space-unary-ops': [2, {
- 'words': true,
- 'nonwords': false
- }],
- 'spaced-comment': [2, 'always', {
- 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
- }],
- 'template-curly-spacing': [2, 'never'],
- 'use-isnan': 2,
- 'valid-typeof': 2,
- 'wrap-iife': [2, 'any'],
- 'yield-star-spacing': [2, 'both'],
- 'yoda': [2, 'never'],
- 'prefer-const': 2,
- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
- 'object-curly-spacing': [2, 'always', {
- objectsInObjects: false
- }],
- 'array-bracket-spacing': [2, 'never']
- }
- }
官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
