首页 >> js开发 >> jsvue+ESLint 配置保存 自动格式化代码js大全
jsvue+ESLint 配置保存 自动格式化代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1. 在.eslintrc.js 添加 vscode 终端启动服务
// 添加⾃定义规则
'prettier/prettier': [
// eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示
'error',
{
singleQuote: true,
semi: false, //结束是否加分号
printWidth: 160//每行最长字符
}
]
// 添加⾃定义规则
'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
},
// eslint格式化字符串
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},如果编译 发现以下错误
warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files
warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files解决解决解决在vuejs项目中,运行如下命令解决:
npm run lint – --fix
npm run lint – --fix如果还是没行,就要在 vue.config.js 添加vue.config.js
// vue.config.js
// 旧 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;
// vue.config.js// 旧 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;~@/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
})
}
}
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
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.jscss laoder没安装安装
npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev
npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev总结总结总结
// 添加⾃定义规则
'prettier/prettier': [
// eslint校验不成功后,error或2则报错,warn或1则警告,off或0则⽆提示
'error',
{
singleQuote: true,
semi: false, //结束是否加分号
printWidth: 160//每行最长字符
}
]
// 添加⾃定义规则
'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
},
// eslint格式化字符串
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},如果编译 发现以下错误
warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files
warning delete ·· (prettier/prettier) “error Delete ⏎ prettier/prettier” in .vue files解决解决解决在vuejs项目中,运行如下命令解决:
npm run lint – --fix
npm run lint – --fix如果还是没行,就要在 vue.config.js 添加vue.config.js
// vue.config.js
// 旧 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;
// vue.config.js// 旧 data: @import "~@/assets/scss/variables.scss"; // 新 prependData: @import ~@/assets/scss/variables.scss;~@/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
})
}
}
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
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.jscss laoder没安装安装
npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev
npm install sass-loader --save-dev
npm install node-sass --save-dev
npm install css-loader style-loader --save-dev总结总结总结
相关文章:
- jsvue中echarts图表大小适应窗口大小且不需要刷新案例js大全
- js深入理解 ES6中的 Reflect用法js大全
- JavaScriptvuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- js解决echarts图表使用v-show控制图表显示不全的问题js大全
- JavaScriptecharts.js 动态生成多个图表 使用vue封装组件操作
- jsvue-router为激活的路由设置样式操作js大全
- js完美解决vue 中多个echarts图表自适应的问题js大全
- js解决Vue @submit 提交后不刷新页面问题js大全
- jsJS中作用域以及变量范围分析js大全
- jsvue cli4.0项目引入typescript的方法js大全