详解如何在vue项目中使用eslint+prettier格式化代码


Posted in Javascript onNovember 10, 2018

 对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下。今天给大家介绍如何使用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
  }
 ]
}

现在我们就可以愉快的编码了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
AngularJS上传文件的示例代码
Nov 10 #Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
document.compatMode介绍
2009/05/21 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
js实现图片实时时钟
2020/01/15 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python字典改变value值方法总结
2019/06/21 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
党的群众教育实践活动实施方案
2014/06/12 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
加强党性修养心得体会
2016/01/21 职场文书
八年级数学教学反思
2016/02/17 职场文书
四年级语文教学反思
2016/03/03 职场文书