13518219792
小编给大家分享一下在vue项目中使用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
}
]
}现在我们就可以愉快的编码了
以上是“在vue项目中使用eslint+prettier格式化代码的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
