自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

使Vue開發(fā)如魚得水的 VS Code 擴展

作者：星野丶
開發(fā) 前端
作為一個 Vue 搬磚工，我一直在為 Vue 開發(fā)尋找合適的 VS Code 擴展。以下是一些好用的擴展，可以讓我們在搬磚時更加輕松。

[[407611]]

本文轉(zhuǎn)載自微信公眾號「前端有道」，作者星野丶。轉(zhuǎn)載本文請聯(lián)系前端有道公眾號。

作為一個 Vue 搬磚工，我一直在為 Vue 開發(fā)尋找合適的 VS Code 擴展。以下是一些好用的擴展，可以讓我們在搬磚時更加輕松。

目錄

  • Vetur 開發(fā)Vue的童鞋必裝插件之一
  • Volar 開發(fā)Vue3.0的童鞋必裝插件之一
  • Simplified Language 簡體語言包
  • 翻譯(英漢詞典)
  • Material Icon Theme 圖標(biāo)主題
  • VSCode Icons 圖標(biāo)主題
  • Bracket Pair Colorizer 彩色的括號
  • GitLens 增強Git工具
  • Git History
  • Path Intellisense 路徑智能提示
  • Auto Rename Tag 自動關(guān)閉標(biāo)簽
  • Auto Close Tag 自動修改標(biāo)簽名
  • Code Runner 運行代碼
  • Live Server 搭建本地服務(wù)器的靜態(tài)頁面
  • Prettier - Code formatter 代碼格式化
  • ESlint 代碼檢測

Vetur

這款插件相信不用我多說，想必大家都知道或者用過，它提供了 Vue 特定的語法語義突出顯示、代碼片段和API語法以錯誤檢查調(diào)試等。圖片

官方地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur

Volar(Vue3.0開發(fā))

如果你的項目Vue3.0推薦用這款插件，體驗上會更好。

Volar 是一個專為 Vue 3 構(gòu)建的語言支持插件，它基于@vue/reactivity按需計算 TypeScript 來優(yōu)化類似于原生 TypeScript 語言服務(wù)的性能。

官方地址：https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Chinese (Simplified) Language Pack for Visual Studio Code

這款插件把VSCode的英文轉(zhuǎn)換成中文。對我我這種英語渣渣特別剛需。而且這個是官方漢化包，理解沒毛病。

每當(dāng)VS code軟件更新后，有變會英文，只需要關(guān)閉軟件重啟就行，或者重新安裝一下這款插件。

官方地址：Chinese (Simplified) Language Pack for Visual Studio Code

翻譯(英漢詞典) 代碼翻譯

在線翻譯，翻譯出來的結(jié)果真慢，吐槽。這款本地77萬詞條英漢詞典，不依賴任何在線翻譯API，無查詢次數(shù)限制，秒輸出結(jié)果。

這款插件支持駝峰、小駝峰、下劃線等等寫法來寫變量名、屬性名、類名和方法名的。

-w1205

官方地址：https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary

Material Icon Theme

非常齊全的圖標(biāo)，可以說你想要包含在這里面，只截了其中一小部分圖。

-w895

官方地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

vscode-icons

這一款是VSCode官方的圖標(biāo)主題包，看個人喜好選擇圖標(biāo)庫。效果如下

-w330

官方地址：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Bracket Pair Colorizer

這個插件使用顏色來標(biāo)識匹配的括號。代碼非常多的情況，括號也就變的非常多，如果刪除某個屬性名對象，沒有顏色區(qū)分可以就會誤刪。

不過正常來說不推薦括號寫的很多，推薦用扁平化寫法，雖然顏色區(qū)分代碼過長，看的也是腦殼疼。

官方地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

GitLens

增強Git功能構(gòu)建到Visual Studio代碼可視化代碼作者一眼就通過Git指責(zé)注釋和代碼鏡頭,無縫導(dǎo)航和探索Git存儲庫。

官方地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Git History

查看git日志、文件歷史、比較分支或提交。

當(dāng)我們需要查看文件的歷史，可能會借助另外一個Git UI工具查看，耶，只要點擊文件的右上角圖標(biāo)就能看到歷史代碼還有代碼差異性。

官方地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Path Intellisense 路徑智能提示

當(dāng)我們需要引入某個文件或者圖片，文件夾層級可能很多，我們可以通過這款插件來提示我們當(dāng)前下的文件有哪些。

官方地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Auto Rename Tag

自動重命名成對的HTML/XML標(biāo)簽。

當(dāng)我們修改的標(biāo)簽時就會生成。

官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Close Tag

自動添加HTML/XML關(guān)閉標(biāo)簽。

當(dāng)我們寫下時就會生成。

官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Code Runner

運行代碼片段或多種語言的代碼文件，支持C、Java、JavaScript、PHP、Python等

只需要點擊鼠標(biāo)右鍵，選擇 Run Code 就能得到結(jié)果

官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Live Server

在本地服務(wù)器搭建自動重新加載靜態(tài)特性HTML頁面。

html頁面中鼠標(biāo)右鍵選擇 open with Live Server

官方地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Prettier - Code formatter

Prettier是一個代碼格式化程序。它通過解析代碼并使用它自己的規(guī)則重新打印代碼來強制實現(xiàn)一致的樣式，這些規(guī)則考慮到最大行長度，在必要時格式化代碼。

  1. // vscode setting.json 
  2. { 
  3.   "editor.formatOnSave": false, // 在保存時格式化文件 
  4.   "editor.defaultFormatter": "esbenp.prettier-vscode", 
  5.   "[javascript]": { 
  6.     "editor.defaultFormatter": "esbenp.prettier-vscode" 
  7.   }, 
  8.   "[vue]": { 
  9.     "editor.defaultFormatter": "esbenp.prettier-vscode" 
  10.   } 
  11. } 

官方地址：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ESlint

在一個多人協(xié)同開發(fā)的團隊中，統(tǒng)一的代碼編寫規(guī)范非常重要。一套規(guī)范可以讓我們編寫的代碼達到一致的風(fēng)格，提高代碼的可讀性和統(tǒng)一性。自然維護性也會有所提高。

以下eslint規(guī)范代碼依托于 vue 官方的 eslint 規(guī)則 eslint-config-vue 做了少許的修改。大家可以按照自己的需求進行定制化配置。

  1. // .eslintrc.js 
  2. module.exports = { 
  3.   root: true, 
  4.   parserOptions: { 
  5.     parser: 'babel-eslint', 
  6.     sourceType: 'module' 
  7.   }, 
  8.   env: { 
  9.     browser: true, 
  10.     node: true, 
  11.     es6: true, 
  12.   }, 
  13.   extends: ['plugin:vue/recommended', 'eslint:recommended'], 
  14.  
  15.   // add your custom rules here 
  16.   //it is base on https://github.com/vuejs/eslint-config-vue 
  17.   rules: { 
  18.     "vue/max-attributes-per-line": [2, { 
  19.       "singleline": 10, 
  20.       "multiline": { 
  21.         "max": 1, 
  22.         "allowFirstLine": false 
  23.       } 
  24.     }], 
  25.     "vue/singleline-html-element-content-newline": "off", 
  26.     "vue/multiline-html-element-content-newline":"off", 
  27.     "vue/name-property-casing": ["error", "PascalCase"], 
  28.     "vue/no-v-html": "off", 
  29.     'accessor-pairs': 2, 
  30.     'arrow-spacing': [2, { 
  31.       'before': true, 
  32.       'after': true 
  33.     }], 
  34.     'block-spacing': [2, 'always'], 
  35.     'brace-style': [2, '1tbs', { 
  36.       'allowSingleLine': true 
  37.     }], 
  38.     'camelcase': [0, { 
  39.       'properties': 'always' 
  40.     }], 
  41.     'comma-dangle': [2, 'never'], 
  42.     'comma-spacing': [2, { 
  43.       'before': false, 
  44.       'after': true 
  45.     }], 
  46.     'comma-style': [2, 'last'], 
  47.     'constructor-super': 2, 
  48.     'curly': [2, 'multi-line'], 
  49.     'dot-location': [2, 'property'], 
  50.     'eol-last': 2, 
  51.     'eqeqeq': ["error", "always", {"null": "ignore"}], 
  52.     'generator-star-spacing': [2, { 
  53.       'before': true, 
  54.       'after': true 
  55.     }], 
  56.     'handle-callback-err': [2, '^(err|error)$'], 
  57.     'indent': [2, 2, { 
  58.       'SwitchCase': 1 
  59.     }], 
  60.     'jsx-quotes': [2, 'prefer-single'], 
  61.     'key-spacing': [2, { 
  62.       'beforeColon': false, 
  63.       'afterColon': true 
  64.     }], 
  65.     'keyword-spacing': [2, { 
  66.       'before': true, 
  67.       'after': true 
  68.     }], 
  69.     'new-cap': [2, { 
  70.       'newIsCap': true, 
  71.       'capIsNew': false 
  72.     }], 
  73.     'new-parens': 2, 
  74.     'no-array-constructor': 2, 
  75.     'no-caller': 2, 
  76.     'no-console': 'off', 
  77.     'no-class-assign': 2, 
  78.     'no-cond-assign': 2, 
  79.     'no-const-assign': 2, 
  80.     'no-control-regex': 0, 
  81.     'no-delete-var': 2, 
  82.     'no-dupe-args': 2, 
  83.     'no-dupe-class-members': 2, 
  84.     'no-dupe-keys': 2, 
  85.     'no-duplicate-case': 2, 
  86.     'no-empty-character-class': 2, 
  87.     'no-empty-pattern': 2, 
  88.     'no-eval': 2, 
  89.     'no-ex-assign': 2, 
  90.     'no-extend-native': 2, 
  91.     'no-extra-bind': 2, 
  92.     'no-extra-boolean-cast': 2, 
  93.     'no-extra-parens': [2, 'functions'], 
  94.     'no-fallthrough': 2, 
  95.     'no-floating-decimal': 2, 
  96.     'no-func-assign': 2, 
  97.     'no-implied-eval': 2, 
  98.     'no-inner-declarations': [2, 'functions'], 
  99.     'no-invalid-regexp': 2, 
  100.     'no-irregular-whitespace': 2, 
  101.     'no-iterator': 2, 
  102.     'no-label-var': 2, 
  103.     'no-labels': [2, { 
  104.       'allowLoop': false, 
  105.       'allowSwitch': false 
  106.     }], 
  107.     'no-lone-blocks': 2, 
  108.     'no-mixed-spaces-and-tabs': 2, 
  109.     'no-multi-spaces': 2, 
  110.     'no-multi-str': 2, 
  111.     'no-multiple-empty-lines': [2, { 
  112.       'max': 1 
  113.     }], 
  114.     'no-native-reassign': 2, 
  115.     'no-negated-in-lhs': 2, 
  116.     'no-new-object': 2, 
  117.     'no-new-require': 2, 
  118.     'no-new-symbol': 2, 
  119.     'no-new-wrappers': 2, 
  120.     'no-obj-calls': 2, 
  121.     'no-octal': 2, 
  122.     'no-octal-escape': 2, 
  123.     'no-path-concat': 2, 
  124.     'no-proto': 2, 
  125.     'no-redeclare': 2, 
  126.     'no-regex-spaces': 2, 
  127.     'no-return-assign': [2, 'except-parens'], 
  128.     'no-self-assign': 2, 
  129.     'no-self-compare': 2, 
  130.     'no-sequences': 2, 
  131.     'no-shadow-restricted-names': 2, 
  132.     'no-spaced-func': 2, 
  133.     'no-sparse-arrays': 2, 
  134.     'no-this-before-super': 2, 
  135.     'no-throw-literal': 2, 
  136.     'no-trailing-spaces': 2, 
  137.     'no-undef': 2, 
  138.     'no-undef-init': 2, 
  139.     'no-unexpected-multiline': 2, 
  140.     'no-unmodified-loop-condition': 2, 
  141.     'no-unneeded-ternary': [2, { 
  142.       'defaultAssignment': false 
  143.     }], 
  144.     'no-unreachable': 2, 
  145.     'no-unsafe-finally': 2, 
  146.     'no-unused-vars': [2, { 
  147.       'vars': 'all', 
  148.       'args': 'none' 
  149.     }], 
  150.     'no-useless-call': 2, 
  151.     'no-useless-computed-key': 2, 
  152.     'no-useless-constructor': 2, 
  153.     'no-useless-escape': 0, 
  154.     'no-whitespace-before-property': 2, 
  155.     'no-with': 2, 
  156.     'one-var': [2, { 
  157.       'initialized': 'never' 
  158.     }], 
  159.     'operator-linebreak': [2, 'after', { 
  160.       'overrides': { 
  161.         '?': 'before', 
  162.         ':': 'before' 
  163.       } 
  164.     }], 
  165.     'padded-blocks': [2, 'never'], 
  166.     'quotes': [2, 'single', { 
  167.       'avoidEscape': true, 
  168.       'allowTemplateLiterals': true 
  169.     }], 
  170.     'semi': [2, 'never'], 
  171.     'semi-spacing': [2, { 
  172.       'before': false, 
  173.       'after': true 
  174.     }], 
  175.     'space-before-blocks': [2, 'always'], 
  176.     'space-before-function-paren': [2, 'never'], 
  177.     'space-in-parens': [2, 'never'], 
  178.     'space-infix-ops': 2, 
  179.     'space-unary-ops': [2, { 
  180.       'words': true, 
  181.       'nonwords': false 
  182.     }], 
  183.     'spaced-comment': [2, 'always', { 
  184.       'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] 
  185.     }], 
  186.     'template-curly-spacing': [2, 'never'], 
  187.     'use-isnan': 2, 
  188.     'valid-typeof': 2, 
  189.     'wrap-iife': [2, 'any'], 
  190.     'yield-star-spacing': [2, 'both'], 
  191.     'yoda': [2, 'never'], 
  192.     'prefer-const': 2, 
  193.     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 
  194.     'object-curly-spacing': [2, 'always', { 
  195.       objectsInObjects: false 
  196.     }], 
  197.     'array-bracket-spacing': [2, 'never'] 
  198.   } 
  199. } 

 

官方地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

 

責(zé)任編輯：武曉燕 來源： 前端有道
Vue Code 擴展
相關(guān)推薦

2023-09-08 10:23:13

JavaScriptNPM模塊

2021-12-28 09:40:48

VS Code工具代碼

2024-08-29 16:06:26

前端Vue開發(fā)

2020-02-04 09:00:00

物聯(lián)網(wǎng)開發(fā)VS CodeIOT

2019-04-23 12:10:00

前端開發(fā)編程

2023-06-05 11:26:23

2021-12-27 10:57:04

SwiftXcodeSSWG

2021-02-03 11:19:52

Go語言Go團隊服務(wù)器

2022-04-06 10:16:08

微軟Python 擴展Pylint 擴展

2022-01-10 10:48:34

SorbetVS CodeRuby

2021-04-21 07:51:06

Vue 開發(fā)VS CodeVetur

2024-08-21 08:37:47

CodeEmmet懸浮框

2022-04-20 09:02:57

架構(gòu)

2021-01-25 15:18:37

Python 開發(fā)編程語言

2022-05-07 09:43:15

Python微軟擴展程序

2021-01-26 02:29:04

VS CodePython開發(fā)

2023-08-09 13:28:58

2022-06-17 07:44:40

VSCode C#開源

2021-02-02 21:42:30

VS Code編輯器開發(fā)

2020-07-06 14:54:17

Python 開發(fā)編程語言
點贊
收藏

51CTO技術(shù)棧公眾號