详解如何在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 直接操作本地文件的实现代码
Dec 01 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
EXTJS7实现点击拖拉选择文本
Dec 17 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
PHP 和 HTML
2006/10/09 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
浅谈js中的bind
2019/03/18 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
pycharm显示远程图片的实现
2019/11/04 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
部门优秀员工推荐信
2015/03/24 职场文书
英文辞职信范文
2015/05/13 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL