vscode 中對(duì)vue進(jìn)行格式化

PascalXie 發(fā)布于2019-08-23 13:47 / 2743人閱讀

摘要：開(kāi)發(fā)環(huán)境安裝插件常用配置對(duì)應(yīng)四個(gè)值是不換行讓使用的代碼格式進(jìn)行校驗(yàn)讓中的按編輯器自帶的格式進(jìn)行格式化

開(kāi)發(fā)環(huán)境

1. vscode

安裝插件

vetur, prettier, editor,

常用配置

{
    "git.ignoredRepositories": [
    ],
    "eslint.validate": [
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "javascriptreact",
      "vue"
    ],
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "window.zoomLevel": 1,
    "terminal.integrated.shell.windows": "",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        // auto force force-aligned force-expand-multiline
        // 對(duì)應(yīng)四個(gè)值 auto是不換行
        "wrap_attributes": "auto"
      },
      "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
      }
    },
    "eslint.options": {
      "extensions": [".js", ".vue"]
    },
    "editor.quickSuggestions": {
      "strings": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.tabSize": 2,
    "files.associations": {
      "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "editor.cursorBlinking": "smooth",
    "editor.minimap.renderCharacters": false,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    // 讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
    "prettier.eslintIntegration": true,
    // 讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "element-helper.version": "2.5",
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.exclude": {
      // "**/node_modules": true
    }
  }

GPU云服務(wù)器云服務(wù)器中對(duì) vscode java中對(duì)數(shù)組賦值 vscode webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/99546.html

相關(guān)文章

項(xiàng)目代碼的格式化統(tǒng)一配置 Prettier & ESLint

摘要：以前沒(méi)時(shí)間過(guò)，每次項(xiàng)目編輯器的插件就關(guān)掉，老項(xiàng)目都沒(méi)注意過(guò)相關(guān)的代碼規(guī)范，這次新項(xiàng)目加入進(jìn)去實(shí)踐下三個(gè)插件功自動(dòng)有些規(guī)則是沖突的，需要確定優(yōu)先順序，其他插件進(jìn)行自定義化的配置都可以自動(dòng)保存格式化的功能用和寫出高質(zhì)量代碼在中對(duì)兩者進(jìn)行配置使用以前沒(méi)時(shí)間過(guò)eslint，每次項(xiàng)目vscode 編輯器的eslint插件就關(guān)掉eslint，老項(xiàng)目都沒(méi)注意過(guò)相關(guān)的代碼規(guī)范，這次新項(xiàng)目加入進(jìn)去實(shí)踐...

Yu_Huang 2019-08-26 12:19 評(píng)論0 收藏0
VUE實(shí)例圖解

摘要：案例品牌列表構(gòu)建基本結(jié)構(gòu)利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時(shí)在后面的中要進(jìn)行初始化為添加按鈕綁定事件的中，綁定值為關(guān)鍵字刪除標(biāo)簽綁定函數(shù)，傳入?yún)?shù)的時(shí)候，需要用括號(hào)事件修飾符，表示阻止默認(rèn)事件實(shí)例對(duì)象新建一個(gè)實(shí)例函數(shù)中初始化需要雙向 VUE案例品牌列表構(gòu)建基本結(jié)構(gòu) 利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 評(píng)論0 收藏0
用VS Code開(kāi)發(fā)Vue應(yīng)用

摘要：這是為什么呢因?yàn)槲覀冸m然引入了，但是還沒(méi)有對(duì)做設(shè)置，我們?cè)陧?xiàng)目的根目錄下創(chuàng)建一個(gè)文件，然后在其中加入再次執(zhí)行，現(xiàn)在我們看到已經(jīng)能夠起作用了。摘要： 0錯(cuò)誤0警告應(yīng)該是每個(gè)程序員最基本的要求。原文：用vscode開(kāi)發(fā)vue應(yīng)用作者：張京 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。現(xiàn)在用VSCode開(kāi)發(fā)Vue.js應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了，但很多時(shí)候我們看到的代碼混亂不堪，作為一...

zhaofeihao 2019-05-23 16:28 評(píng)論0 收藏0
如何優(yōu)雅地使用 VSCode 來(lái)編輯 vue 文件？

摘要：注本文首發(fā)在我的個(gè)人博客最近有個(gè)項(xiàng)目使用了，本來(lái)一直使用的是來(lái)進(jìn)行開(kāi)發(fā)，可是遇到了很多問(wèn)題。此外，還有很多規(guī)范是幫助我們寫出更加優(yōu)雅而不容易出錯(cuò)的代碼的。，終于基本搞定了，可以愉快地開(kāi)發(fā)應(yīng)用了。注：本文首發(fā)在我的個(gè)人博客最近有個(gè)項(xiàng)目使用了 Vue.js ，本來(lái)一直使用的是 PHPStorm 來(lái)進(jìn)行開(kāi)發(fā)，可是遇到了很多問(wèn)題。后來(lái)，果斷放棄收費(fèi)的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 評(píng)論0 收藏0
VsCode 配置Eslint格式化代碼（vue）以及常用插件

摘要：配置插件擴(kuò)展商店搜索，點(diǎn)擊安裝，并重新加載配置，打開(kāi)文件首選項(xiàng)設(shè)置在用戶設(shè)置中插入配置代碼支持此時(shí)，就可以在項(xiàng)目中檢測(cè)代碼了檢測(cè)比較嚴(yán)格，若希望按照格式化代碼，進(jìn)行以下操作安裝插件，這是上一個(gè)代碼提示，語(yǔ)法高亮等功能的流行插件安裝后在默認(rèn)配配置eslint 插件擴(kuò)展商店搜索 eslint，點(diǎn)擊安裝，并重新加載；showImg(https://segmentfault.com/img...

laznrbfe 2019-08-22 17:05 評(píng)論0 收藏0