對于前端代碼風格這個問題一直是經久不衰，每個人都有自己的代碼風格，每次看到別人代碼一團糟時候我們都會吐槽下。今天給大家介紹如何使用eslint+prettier統一代碼風格。
對于eslint大家應該比較了解了，是用來校驗代碼規范的。給大家介紹下prettier,prettier是用來統一代碼風格，格式化代碼的，支持js、ts、css、less、scss、json、jsx。并且集成了vscode、vim、webstorm、sublime text插件。
如果你的項目中采用的是ellint默認規則并且沒有添加別的規則、沒有使用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 中lint里面添加--fix 當執行npm run lint時eslint會幫你修復一些可以自動修復得規則
"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" },現在我們就寫完代碼保存時prettier就會幫我們格式化代碼，執行npm run lint時eslint會修復一些可以修復的規則，其余得規則就需要我們手動修復了
如果你的項目中使用的是standard或airbnd的代碼規范、或項目中自己添加了一些eslint樣式規則，那么我們需要安裝一些依賴在項目中幫助格式化代碼
npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
安裝eslint-plugin-prettier 配合eslint使用prettier,安裝eslint-config-prettier禁用一些eslint和prettier沖突的規則，安裝prettier-eslint-cli 使我們可以敲命令格式化代碼
在.eslintrc.js plugin和extends中添加prettier支持 rules中添加規則
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中添加配置 執行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/"" },當我們執行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 } ]}現在我們就可以愉快的編碼了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
