使Vue開發(fā)如魚得水的 VS Code 擴(kuò)展
本文轉(zhuǎn)載自微信公眾號(hào)「前端有道」，作者星野丶。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端有道公眾號(hào)。
作為一個(gè) Vue 搬磚工，我一直在為 Vue 開發(fā)尋找合適的 VS Code 擴(kuò)展。以下是一些好用的擴(kuò)展，可以讓我們?cè)诎岽u時(shí)更加輕松。
目錄
- Vetur 開發(fā)Vue的童鞋必裝插件之一
- Volar 開發(fā)Vue3.0的童鞋必裝插件之一
- Simplified Language 簡(jiǎn)體語(yǔ)言包
- 翻譯(英漢詞典)
- Material Icon Theme 圖標(biāo)主題
- VSCode Icons 圖標(biāo)主題
- Bracket Pair Colorizer 彩色的括號(hào)
- GitLens 增強(qiáng)Git工具
- Git History
- Path Intellisense 路徑智能提示
- Auto Rename Tag 自動(dòng)關(guān)閉標(biāo)簽
- Auto Close Tag 自動(dòng)修改標(biāo)簽名
- Code Runner 運(yùn)行代碼
- Live Server 搭建本地服務(wù)器的靜態(tài)頁(yè)面
- Prettier - Code formatter 代碼格式化
- ESlint 代碼檢測(cè)
Vetur
這款插件相信不用我多說(shuō)，想必大家都知道或者用過(guò)，它提供了 Vue 特定的語(yǔ)法語(yǔ)義突出顯示、代碼片段和API語(yǔ)法以錯(cuò)誤檢查調(diào)試等。圖片
官方地址：https://marketplace.visualstudio.com/items?itemName=octref.vetur
Volar(Vue3.0開發(fā))
如果你的項(xiàng)目Vue3.0推薦用這款插件，體驗(yàn)上會(huì)更好。
Volar 是一個(gè)專為 Vue 3 構(gòu)建的語(yǔ)言支持插件，它基于@vue/reactivity按需計(jì)算 TypeScript 來(lái)優(yōu)化類似于原生 TypeScript 語(yǔ)言服務(wù)的性能。
官方地址：https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
Chinese (Simplified) Language Pack for Visual Studio Code
這款插件把VSCode的英文轉(zhuǎn)換成中文。對(duì)我我這種英語(yǔ)渣渣特別剛需。而且這個(gè)是官方漢化包，理解沒(méi)毛病。
每當(dāng)VS code軟件更新后，有變會(huì)英文，只需要關(guān)閉軟件重啟就行，或者重新安裝一下這款插件。
官方地址：Chinese (Simplified) Language Pack for Visual Studio Code
翻譯(英漢詞典) 代碼翻譯
在線翻譯，翻譯出來(lái)的結(jié)果真慢，吐槽。這款本地77萬(wàn)詞條英漢詞典，不依賴任何在線翻譯API，無(wú)查詢次數(shù)限制，秒輸出結(jié)果。
這款插件支持駝峰、小駝峰、下劃線等等寫法來(lái)寫變量名、屬性名、類名和方法名的。
-w1205
官方地址：https://marketplace.visualstudio.com/items?itemName=CodeInChinese.EnglishChineseDictionary
Material Icon Theme
非常齊全的圖標(biāo)，可以說(shuō)你想要包含在這里面，只截了其中一小部分圖。
-w895
官方地址：https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
vscode-icons
這一款是VSCode官方的圖標(biāo)主題包，看個(gè)人喜好選擇圖標(biāo)庫(kù)。效果如下
-w330
官方地址：https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Bracket Pair Colorizer
這個(gè)插件使用顏色來(lái)標(biāo)識(shí)匹配的括號(hào)。代碼非常多的情況，括號(hào)也就變的非常多，如果刪除某個(gè)屬性名對(duì)象，沒(méi)有顏色區(qū)分可以就會(huì)誤刪。
不過(guò)正常來(lái)說(shuō)不推薦括號(hào)寫的很多，推薦用扁平化寫法，雖然顏色區(qū)分代碼過(guò)長(zhǎng)，看的也是腦殼疼。
官方地址：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
GitLens
增強(qiáng)Git功能構(gòu)建到Visual Studio代碼可視化代碼作者一眼就通過(guò)Git指責(zé)注釋和代碼鏡頭,無(wú)縫導(dǎo)航和探索Git存儲(chǔ)庫(kù)。
官方地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git History
查看git日志、文件歷史、比較分支或提交。
當(dāng)我們需要查看文件的歷史，可能會(huì)借助另外一個(gè)Git UI工具查看，耶，只要點(diǎn)擊文件的右上角圖標(biāo)就能看到歷史代碼還有代碼差異性。
官方地址：https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Path Intellisense 路徑智能提示
當(dāng)我們需要引入某個(gè)文件或者圖片，文件夾層級(jí)可能很多，我們可以通過(guò)這款插件來(lái)提示我們當(dāng)前下的文件有哪些。
官方地址：https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Auto Rename Tag
自動(dòng)重命名成對(duì)的HTML/XML標(biāo)簽。
當(dāng)我們修改
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Auto Close Tag
自動(dòng)添加HTML/XML關(guān)閉標(biāo)簽。
當(dāng)我們寫下
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Code Runner
運(yùn)行代碼片段或多種語(yǔ)言的代碼文件，支持C、Java、JavaScript、PHP、Python等
只需要點(diǎn)擊鼠標(biāo)右鍵，選擇 Run Code 就能得到結(jié)果
官方地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
Live Server
在本地服務(wù)器搭建自動(dòng)重新加載靜態(tài)特性HTML頁(yè)面。
html頁(yè)面中鼠標(biāo)右鍵選擇 open with Live Server
官方地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier - Code formatter
Prettier是一個(gè)代碼格式化程序。它通過(guò)解析代碼并使用它自己的規(guī)則重新打印代碼來(lái)強(qiáng)制實(shí)現(xiàn)一致的樣式，這些規(guī)則考慮到最大行長(zhǎng)度，在必要時(shí)格式化代碼。
- // vscode setting.json
- {
- "editor.formatOnSave": false, // 在保存時(shí)格式化文件
- "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
在一個(gè)多人協(xié)同開發(fā)的團(tuán)隊(duì)中，統(tǒng)一的代碼編寫規(guī)范非常重要。一套規(guī)范可以讓我們編寫的代碼達(dá)到一致的風(fēng)格，提高代碼的可讀性和統(tǒng)一性。自然維護(hù)性也會(huì)有所提高。
以下eslint規(guī)范代碼依托于 vue 官方的 eslint 規(guī)則 eslint-config-vue 做了少許的修改。大家可以按照自己的需求進(jìn)行定制化配置。
- // .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
