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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
js中less常用的方法小结
Aug 09 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
5个实用的JavaScript新特性
Jun 16 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 生成文字png图片的代码
2011/04/17 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
python正则表达式re模块详细介绍
2014/05/29 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
大学总结自我鉴定
2014/01/18 职场文书
升学宴学生答谢词
2015/01/05 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技