eslint+prettier统一代码风格的实现方法


Posted in Javascript onJuly 22, 2020

1.实现效果

Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码。

eslint+prettier统一代码风格的实现方法

2.安装vscode插件

  • Vetur
  • ESLint
  • Prettier - Code formatter

3.配置vscode设置

文件?首选项?设置,打开json模式,添加以下配置:

{
 // 控制工作台中活动栏的可见性。
 "workbench.activityBar.visible": true,
 //主题设置
 "workbench.colorTheme": "Monokai",
 // 默认编辑器字号
 "editor.fontSize": 14,
 //是否自动换行
 "editor.wordWrap": "on",
 "workbench.editor.enablePreview": false, //打开文件不覆盖
 "search.followSymlinks": false, //关闭rg.exe进程
 "editor.minimap.enabled": false, //关闭迷你图快速预览
 "files.autoSave": "onWindowChange", // 切换窗口时自动保存。
 "editor.lineNumbers": "on", //开启行数提示
 "editor.quickSuggestions": {
 //开启自动显示建议
 "other": true,
 "comments": true,
 "strings": true
 },
 "editor.tabSize": 2, //制表符符号eslint

 //.vue文件template格式化支持,并使用js-beautify-html插件
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 //js-beautify-html格式化配置,属性强制换行
 "vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
 "wrap_attributes": "force-aligned"
 }
 },
 //根据文件后缀名定义vue文件类型
 "files.associations": {
 "*.vue": "vue"
 },
 //配置 ESLint 检查的文件类型
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 {
 "language": "vue",
 "autoFix": true
 }
 ],
 //保存时eslint自动修复错误
 "eslint.autoFixOnSave": true,
 //保存自动格式化
 "editor.formatOnSave": true
}

4.配置.eslintrc.js

module.exports = {
 root: true,
 env: {
 node: true
 },
 extends: ['plugin:vue/essential', 'eslint:recommended'],
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 //强制使用单引号
 quotes: ['error', 'single'],
 //强制不使用分号结尾
 semi: ['error', 'never']
 },
 parserOptions: {
 parser: 'babel-eslint'
 }
}

5.配置.prettierrc

{
 "eslintIntegration": true, 
 "singleQuote": true,
 "semi": false
}

到此这篇关于eslint+prettier 统一代码风格的实现的文章就介绍到这了,更多相关eslint prettier 统一代码风格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 #Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 #Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 #Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 #Javascript
js实现带积分弹球小游戏
Jul 21 #Javascript
在vue中created、mounted等方法使用小结
Jul 21 #Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 #Javascript
You might like
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
iView框架问题整理小结
2018/10/16 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python绘图方法实例入门
2015/05/19 Python
详解Python字典小结
2018/10/20 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
酒店优秀员工事迹材料
2014/06/02 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server