成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vscode 配置eslint 開發(fā)vue的相關(guān)配置

haobowd / 1284人閱讀

摘要：參考詳情請(qǐng)參考此插件允許和修復(fù)文件中包含的內(nèi)聯(lián)腳本。這是因?yàn)橹邪l(fā)生了許多內(nèi)部更改，包括支持預(yù)處理器中自動(dòng)固定的新。請(qǐng)確保在你的配置中使用了該插件自身的配置代碼規(guī)范解決報(bào)錯(cuò)問題

如何在vscode中用JavaScript Standard Style風(fēng)格去驗(yàn)證 vue文件
實(shí)際上JavaScript Standard Style有一個(gè)FAQ, 說明了如何使用。

但是有一點(diǎn)非常重要的作者沒有提到，就是eslint-plugin-html這個(gè)插件必須要安裝3.x.x版本的, 現(xiàn)在eslint-plugin-html, 已經(jīng)升級(jí)到4.x版本，默認(rèn)不寫版本號(hào)安裝的就是4.x版本的，所以會(huì)出現(xiàn)問題。

參考：詳情請(qǐng)參考 https://www.npmjs.com/package...
此ESLint插件允許linting和修復(fù)HTML文件中包含的內(nèi)聯(lián)腳本。

遷移到v4
eslint-plugin-htmlv4至少需要ESLint v4.7。這是因?yàn)镋SLint v4.7中發(fā)生了許多內(nèi)部更改，包括支持預(yù)處理器中自動(dòng)固定的新API。如果您仍在使用舊版本的ESLint，請(qǐng)考慮升級(jí)或繼續(xù)使用 eslint-plugin-htmlv3。

eslint-plugin-htmlv4中的重要特性（和重大變化）是能夠選擇在同一HTML文件中的腳本標(biāo)記之間共享范圍的方式。

遷移到v3
如果您正在考慮升級(jí)到v3，請(qǐng)閱讀本指南。
ESLint v4 is only supported by eslint-plugin-html v3, so you can"t use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint).
If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, ...)
// FAQ
How to lint script tag in vue or html files?

You can lint them with eslint-plugin-html, just install it first, then enable linting for those file types in settings.json with:

 {
 "standard.validate": [
      "javascript",
      "javascriptreact",
      "html"
  ],
  "standard.options": {
      "plugins": ["html"]
  },
  "files.associations": {
      "*.vue": "html"
  }
  }

If you want to enable autoFix for the new languages, you should enable it yourself:

 {"standard.validate": [
     "javascript",
     "javascriptreact",
     { "language": "html", "autoFix": true }
 ],
 "standard.options": {
     "plugins": ["html"]
 }
}
1、需要安裝插件：

npm i -g standard
npm i -g [email protected] 此處使用是3x版本
npm i -g eslint 或者 vscode 安裝 eslint

2 、vscode setting 設(shè)置： 
{
  "standard.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "standard.options": {
    "plugin": ["html"]
  },
  "files.associations": {
    "*.vue": "html"
  },
  "standard.autoFixOnSave": true
  }
3、vscode 相關(guān)插件 Prettier and eslint 格式化代碼：

ESLint (如果全局安裝了,vscode 可以不安裝)
Prettier formatter
Vetur
#4 格式化代碼相關(guān)設(shè)置

{
  "files.autoSave": "afterDelay",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "editor.formatOnSave": true
}
5 .eslintrc.js 相關(guān)

項(xiàng)目根目錄下創(chuàng)建 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  "extends": [
    // 需要官方的 eslint-plugin-vue，它支持同時(shí)檢查你 .vue 文件中的模板和腳本。請(qǐng)確保在你的 ESLint 配置中使用了該插件自身的配置：
    "plugin:vue/essential",
      // standard 代碼規(guī)范  https://github.com/standard/standard/blob/master/docs/RULES-en.md
    "@vue/standard"
  ],
  rules: {
    "no-new-func":0,
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 解決 iview 報(bào)錯(cuò)問題
    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
  },
  parserOptions: {
    parser: "babel-eslint"
  }

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54954.html

相關(guān)文章

  • vscode 配置eslint 開發(fā)vue的相關(guān)配置

    摘要：參考詳情請(qǐng)參考此插件允許和修復(fù)文件中包含的內(nèi)聯(lián)腳本。這是因?yàn)橹邪l(fā)生了許多內(nèi)部更改，包括支持預(yù)處理器中自動(dòng)固定的新。請(qǐng)確保在你的配置中使用了該插件自身的配置代碼規(guī)范解決報(bào)錯(cuò)問題 如何在vscode中用JavaScript Standard Style風(fēng)格去驗(yàn)證 vue文件實(shí)際上JavaScript Standard Style有一個(gè)FAQ, 說明了如何使用。 但是有一點(diǎn)非常重要的作者沒有...

    lifesimple 評(píng)論0 收藏0

  • 工程實(shí)戰(zhàn)-vue在vscode的環(huán)境配置

    摘要：基礎(chǔ)開發(fā)插件圖標(biāo)美化調(diào)試代碼格式化代碼格式化代碼規(guī)范語法提示必備及相關(guān)技術(shù)棧語法提示文件高亮格式化編碼支持自動(dòng)閉合標(biāo)簽自動(dòng)更改對(duì)應(yīng)標(biāo)簽名自動(dòng)補(bǔ)全路徑本地項(xiàng)目管理右擊在瀏覽器打開文件支持支持友好化配置基礎(chǔ)設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置設(shè)置配 1. vscode基礎(chǔ)開發(fā)插件 vscode-icons 圖標(biāo)美化 Debugger for Chrome 調(diào)試 Beautify 代碼格式化 Pretti...

    solocoder 評(píng)論0 收藏0

  • vscode一格式化就報(bào)錯(cuò)？各種風(fēng)格問題各種報(bào)錯(cuò)煩不勝煩，教你如何用好vue的eslint風(fēng)格配置

    摘要：格式化安裝插件如果題主認(rèn)真讀了的的話，應(yīng)該可以寫出下面的配置了。用來格式化和提示格式錯(cuò)誤。在編碼過程中提示格式錯(cuò)誤，養(yǎng)成良好的編碼習(xí)慣。 前言 感覺搭建一個(gè)舒服的前端開發(fā)環(huán)境，十分的重要定制化的格式化，編輯器自帶的格式化各種報(bào)錯(cuò)，手動(dòng)改真的會(huì)死人，因此搭建一個(gè)編輯器環(huán)境必不可少，現(xiàn)在要講的是vscode中如何定制vue vs code的配置文件: showImg(https://seg...

    Achilles 評(píng)論0 收藏0

  • vscode-eslint的踩坑實(shí)踐--typescript無法格式化

    摘要：的踩坑實(shí)踐無法格式化引言最近開發(fā)的前端項(xiàng)目隨著開發(fā)的人員越來越多，代碼規(guī)范已經(jīng)是一個(gè)很難避免的問題了，雖然百度有這個(gè)規(guī)則檢查，但是不論是或者是項(xiàng)目本地都沒有配置或檢查，完全靠自覺，這是件非常扯淡的事。 vscode-eslint的踩坑實(shí)踐--typescript無法格式化 引言 最近開發(fā)的前端項(xiàng)目隨著開發(fā)的人員越來越多，代碼規(guī)范已經(jīng)是一個(gè)很難避免的問題了，雖然百度有fecs這個(gè)規(guī)則檢查...

    harryhappy 評(píng)論0 收藏0

  • 如何優(yōu)雅地使用 VSCode 來編輯 vue 文件？

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

    pekonchan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<