在vue項目中使用eslint+prettier格式化代碼的示例

小編給大家分享一下在vue項目中使用eslint+prettier格式化代碼的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司服務(wù)項目包括溆浦網(wǎng)站建設(shè)、溆浦網(wǎng)站制作、溆浦網(wǎng)頁制作以及溆浦網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，溆浦網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到溆浦省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

對于eslint大家應(yīng)該比較了解了，是用來校驗代碼規(guī)范的。給大家介紹下prettier,prettier是用來統(tǒng)一代碼風(fēng)格，格式化代碼的，支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。

如果你的項目中采用的是ellint默認(rèn)規(guī)則并且沒有添加別的規(guī)則、沒有使用standard或airbnb得風(fēng)格，你可以下載編輯器插件直接保存代碼時自動格式化。

以vscode為例：搜索插件  Eslint、vuter、prettier-code安裝，在編輯器首選項   配置中修改配置

  //由于prettier不能格式化vue文件template 所以使用js-beautify-html格式化
  "vetur.format.defaultFormatter.html": "js-beautify-html", 
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //屬性強制折行對齊
    }
  },
  "eslint.autoFixOnSave": true, //保存時使用自動格式化
  "eslint.validate": [  //驗證文件類型
    "javascript",
    "javascriptreact",
    "vue",
    "html",
    "jsx",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "prettier.singleQuote": true, //使用單引號而不是雙引號
  "prettier.jsxBracketSameLine": true, //將>多行JSX元素放在最后一行的末尾，而不是單獨放在下一行
  "editor.formatOnSave": true, //保存時自動格式化

然后在eslint配置文件.eslintrc extends添加 eslint:recommended

extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],

在page.json文件 scripts 中l(wèi)int里面添加--fix   當(dāng)執(zhí)行npm run lint時eslint會幫你修復(fù)一些可以自動修復(fù)得規(guī)則

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js"
  },

現(xiàn)在我們就寫完代碼保存時prettier就會幫我們格式化代碼，執(zhí)行npm run lint時eslint會修復(fù)一些可以修復(fù)的規(guī)則，其余得規(guī)則就需要我們手動修復(fù)了

如果你的項目中使用的是standard或airbnd的代碼規(guī)范、或項目中自己添加了一些eslint樣式規(guī)則，那么我們需要安裝一些依賴在項目中幫助格式化代碼

npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

安裝eslint-plugin-prettier  配合eslint使用prettier,安裝eslint-config-prettier禁用一些eslint和prettier沖突的規(guī)則，安裝prettier-eslint-cli 使我們可以敲命令格式化代碼

在.eslintrc.js  plugin和extends中添加prettier支持  rules中添加規(guī)則

 extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  // required to lint *.vue files
  plugins: ['vue', 'prettier'],
  // add your custom rules here
  rules: {
    'prettier/prettier': 'error',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }

在page.json  script中添加配置   執(zhí)行npm run format就可以格式化代碼了

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js",
    "format": "prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  },

當(dāng)我們執(zhí)行npm run format時還會報各種奇怪的錯誤 如：error: Delete ? (prettier/prettier) at src/pages/xxx 等；這是因為prettier配置和編輯器prettier配置沖突導(dǎo)致的   在rules中配置下覆蓋掉就可以了

"rules": {
 "no-console": 0,
 "prettier/prettier": [
  "error",
  {
   "singleQuote": true,
   "trailingComma": "none",
   "bracketSpacing": true,
   "jsxBracketSameLine": true
  }
 ]
}

現(xiàn)在我們就可以愉快的編碼了

以上是“在vue項目中使用eslint+prettier格式化代碼的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：在vue項目中使用eslint+prettier格式化代碼的示例
轉(zhuǎn)載來源：http://www.muchs.cn/article20/geecjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)站設(shè)計公司、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)