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写的操作系统
Apr 23 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
原生JS实现分页
Apr 19 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+laravel依赖注入知识点总结
2019/11/04 PHP
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
一分钟理解js闭包
2016/05/04 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python对视频画框标记后保存的方法
2018/12/07 Python
浅谈python标准库--functools.partial
2019/03/13 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
会计自荐书
2013/12/02 职场文书
何玥事迹观后感
2015/06/16 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
优秀创业计划书分享
2019/07/19 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
数据库连接池
2021/04/06 MySQL