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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
微信开发 微信授权详解
Oct 21 Javascript
js中的面向对象入门
Mar 06 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
js实现微信聊天界面
Aug 09 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
PHP中array_slice函数用法实例详解
2014/11/25 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
python文件的md5加密方法
2016/04/06 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python之修改图片像素值的方法
2019/07/03 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
pandas参数设置的实用小技巧
2020/08/23 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
2013的个人自我评价
2013/12/26 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
三峡人家导游词
2015/01/31 职场文书
售后服务质量承诺书
2015/04/29 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
golang连接MySQl使用sqlx库
2022/04/14 Golang
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL