您好,登錄后才能下訂單哦!
小編給大家分享一下在vue項(xiàng)目中使用eslint+prettier格式化代碼的示例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
對(duì)于eslint大家應(yīng)該比較了解了,是用來(lái)校驗(yàn)代碼規(guī)范的。給大家介紹下prettier,prettier是用來(lái)統(tǒng)一代碼風(fēng)格,格式化代碼的,支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。
如果你的項(xiàng)目中采用的是ellint默認(rèn)規(guī)則并且沒(méi)有添加別的規(guī)則、沒(méi)有使用standard或airbnb得風(fēng)格,你可以下載編輯器插件直接保存代碼時(shí)自動(dòng)格式化。
以vscode為例:搜索插件 Eslint、vuter、prettier-code安裝,在編輯器首選項(xiàng) 配置中修改配置
//由于prettier不能格式化vue文件template 所以使用js-beautify-html格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" //屬性強(qiáng)制折行對(duì)齊 } }, "eslint.autoFixOnSave": true, //保存時(shí)使用自動(dòng)格式化 "eslint.validate": [ //驗(yàn)證文件類型 "javascript", "javascriptreact", "vue", "html", "jsx", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "prettier.singleQuote": true, //使用單引號(hào)而不是雙引號(hào) "prettier.jsxBracketSameLine": true, //將>多行JSX元素放在最后一行的末尾,而不是單獨(dú)放在下一行 "editor.formatOnSave": true, //保存時(shí)自動(dòng)格式化
然后在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時(shí)eslint會(huì)幫你修復(fù)一些可以自動(dòng)修復(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)在我們就寫(xiě)完代碼保存時(shí)prettier就會(huì)幫我們格式化代碼,執(zhí)行npm run lint時(shí)eslint會(huì)修復(fù)一些可以修復(fù)的規(guī)則,其余得規(guī)則就需要我們手動(dòng)修復(fù)了
如果你的項(xiàng)目中使用的是standard或airbnd的代碼規(guī)范、或項(xiàng)目中自己添加了一些eslint樣式規(guī)則,那么我們需要安裝一些依賴在項(xiàng)目中幫助格式化代碼
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時(shí)還會(huì)報(bào)各種奇怪的錯(cuò)誤 如:error: Delete ? (prettier/prettier) at src/pages/xxx 等;這是因?yàn)閜rettier配置和編輯器prettier配置沖突導(dǎo)致的 在rules中配置下覆蓋掉就可以了
"rules": { "no-console": 0, "prettier/prettier": [ "error", { "singleQuote": true, "trailingComma": "none", "bracketSpacing": true, "jsxBracketSameLine": true } ] }
現(xiàn)在我們就可以愉快的編碼了
以上是“在vue項(xiàng)目中使用eslint+prettier格式化代碼的示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。