詳解如何在vue項目中使用eslint+prettier格式化代碼
對于前端代碼風格這個問題一直是經(jīng)久不衰,每個人都有自己的代碼風格,每次看到別人代碼一團糟時候我們都會吐槽下。今天給大家介紹如何使用eslint+prettier統(tǒng)一代碼風格。
對于eslint大家應該比較了解了,是用來校驗代碼規(guī)范的。給大家介紹下prettier,prettier是用來統(tǒng)一代碼風格,格式化代碼的,支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。
如果你的項目中采用的是ellint默認規(guī)則并且沒有添加別的規(guī)則、沒有使用standard或airbnb得風格,你可以下載編輯器插件直接保存代碼時自動格式化。
以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 當執(zhí)行npm run lint時eslint會幫你修復一些可以自動修復得規(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會修復一些可以修復的規(guī)則,其余得規(guī)則就需要我們手動修復了
如果你的項目中使用的是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\""
},
當我們執(zhí)行npm run format時還會報各種奇怪的錯誤 如:error: Delete ⏎ (prettier/prettier) at src/pages/xxx 等;這是因為prettier配置和編輯器prettier配置沖突導致的 在rules中配置下覆蓋掉就可以了
"rules": {
"no-console": 0,
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true
}
]
}
現(xiàn)在我們就可以愉快的編碼了
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
利用vue組件自定義v-model實現(xiàn)一個Tab組件方法示例
這篇文章主要給大家介紹了關于利用vue組件自定義v-model實現(xiàn)一個Tab組件的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
vue源碼學習之Object.defineProperty 對數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學習之Object.defineProperty 對數(shù)組監(jiān)聽,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
vue3?實現(xiàn)關于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實現(xiàn)關于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06

