vue+ESLint 配置保存 自动格式化代码


Posted in Javascript onMarch 17, 2020

1. 在.eslintrc.js 添加 vscode 终端启动服务

// 添加⾃定义规则
 'prettier/prettier': [
  // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示
  'error',
  {
  singleQuote: true,
  semi: false, //结束是否加分号
  printWidth: 160//每行最长字符 
  }
 ]

vue+ESLint 配置保存 自动格式化代码

2.打开VS code 文件》首选项》设置》扩展》ESLint》

vue+ESLint 配置保存 自动格式化代码vue+ESLint 配置保存 自动格式化代码

// eslint格式化字符串
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },

如果编译 发现以下错误

warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files

解决

在vuejs项目中,运行如下命令解决:

npm run lint ? --fix

如果还是没行,就要在 vue.config.js 添加

vue+ESLint 配置保存 自动格式化代码

// vue.config.js

// 旧 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;

module.exports = {
 chainWebpack: config => {
 config.module
  .rule('eslint')
  .use('eslint-loader')
  .loader('eslint-loader')
  .tap(options => {
  options.fix = true
  return options
  })
 }
}
ERROR Failed to compile with 1 errors                                 1:06:43
 error in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependdata'. These properties are valid:
 object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
 at validate (E:\VUE\ElementUI\myProject\vue-manage\node_modules\schema-utils\dist\validate.js:85:11)
 at Object.loader (E:\VUE\ElementUI\myProject\vue-manage\node_modules\sass-loader\dist\index.js:36:28)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.3.30:3333/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

css laoder没安装安装

npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev

总结

到此这篇关于vue+ESLint 配置保存 自动格式化代码的文章就介绍到这了,更多相关vue 配置保存 自动格式化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
JavaScript中reduce()的用法
May 11 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
php 上传功能实例代码
2010/04/13 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python3使用GUI统计代码量
2019/09/18 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
python代码实现图书管理系统
2020/11/30 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
行政管理毕业生自荐信
2014/02/24 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
征兵宣传标语
2014/06/20 职场文书
银行求职自荐书
2014/06/25 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014会计年终工作总结
2014/12/20 职场文书
新年祝酒词大全
2015/08/11 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers