vue+ESLint 配置保存 自动格式化代码
2020-03-18 12:09
676 查看
1. 在.eslintrc.js 添加 vscode 终端启动服务
// 添加⾃定义规则 'prettier/prettier': [ // eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示 'error', { singleQuote: true, semi: false, //结束是否加分号 printWidth: 160//每行最长字符 } ]
2.打开VS code 文件》首选项》设置》扩展》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.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 配置保存 自动格式化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- vscode vue 自动格式化代码及解决与eslint冲突问题
- Vue-cli Eslint在vscode里代码自动格式化的方法
- Vue Vue-cli Eslint 实现在vscode里保存后代码自动格式化
- vscode保存代码,自动按照eslint规范格式化代码设置
- vue eslint 代码自动格式化
- 使用vue-cli 3+构建的vue项目实现保存时按eslint规则自动格式化代码格式
- 详解如何在vue项目中使用eslint+prettier格式化代码
- vscode设置json文件使保存自动格式化eslint
- ESLint VSCode 代码保存自动格式化配置
- 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
- vsCode 设置vue 保存自动格式化代码
- 挖坑指南:ESLint + VS Code自动格式化代码
- VSCode中编写Vue项目使用Eslint+Prettier格式化,会自动加上分号 空格 单引号变双引号问题
- Eclipse 保存文件时自动格式化代码
- eclipse 保存自动格式化代码
- vue+eslint+vscode配置教程
- VS Code使用之Vue工程配置format代码格式化
- Eclipse保存时自动格式化代码
- Eclipse 保存文件时自动格式化代码
- Android 代码保存时自动格式化