踩坑:VScode 集成 eslint 插件
本文以 Vue 官方脚手架 Vue-cli 为例:
1. 创建 Vue 项目
注意:Vue-cli 默认给出了 eslint 配置,一路回车即可。最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时,好像缺少某些东西,一直没有成功!
2. 安装 VScode 的 eslint 插件
配置: 文件 -> 首选项 -> 设置 -> setting.json
// Turns auto fix on save on or off.
"eslint.autoFixOnSave": true,
// 专门写Vue的eslint配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
},
3. 替换 .eslintrc.js 配置文件
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
node: true,
es6: true,
},
extends: 'eslint:recommended',
// required to lint *.vue files
plugins: [
'html'
],
// check if imports actually resolve
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'camelcase': [0, {
'properties': 'always'
}],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': [2, 'allow-null'],
'generator-star-spacing': [2, {
'before': true,
'after': true
}],
'handle-callback-err': [2, '^(err|error)$'],
'indent': [2, 2, {
'SwitchCase': 1
}],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'new-cap': [2, {
'newIsCap': true,
'capIsNew': false
}],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-console': 'off',
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 2,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, {
'allowLoop': false,
'allowSwitch': false
}],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, {
'vars': 'all',
'args': 'none'
}],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, {
'initialized': 'never'
}],
'operator-linebreak': [2, 'after', {
'overrides': {
'?': 'before',
':': 'before'
}
}],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', {
'avoidEscape': true,
'allowTemplateLiterals': true
}],
'semi': [2, 'never'],
'semi-spacing': [2, {
'before': false,
'after': true
}],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', {
objectsInObjects: false
}],
'array-bracket-spacing': [2, 'never']
}
}
默认的配置文件缺少 rules 和其他一些配置,所以需要自定义相关内容
4. 安装 eslint-plugin-html 插件
由于 eslint 默认只支持 js 文件的脚本检测,如果我们需要支持类 html 文件(如 Vue)的内联脚本检测,还需要安装 eslint-plugin-html 插件
npm install eslint-plugin-html --save-dev
大功告成!附上 eslint 安装模块
---------------------
作者:番茄啊土豆
来源:CSDN
原文:https://blog.csdn.net/zhangfeng1742/article/details/83070858
版权声明:本文为博主原创文章,转载请附上博文链接!
转载于:https://www.cnblogs.com/telwanggs/p/10953804.html
踩坑:VScode 集成 eslint 插件相关推荐
- VSCode中ESLint插件修复+配置教程
文章目录 vscode+eslint插件+配置教程 如果不好用 排查1: 如果出现后面回车符问题 排查2: 保存时好了但是一瞬间代码又回来了 排查3: 右下角是否开启eslint服务 排查4: 如果保 ...
- vscode 安装 eslint 插件
1. eslint 插件 的好处 在我们编写代码时,eslint 插件 会自动纠正我们错误的写法. 比如,当我们编写不符合eslint规范的代码时,启动项目会报错,而且代码里会报红. eslint 插 ...
- VSCode 集成chatGPT插件
VSCode 是一款常用的编辑器,可以通过安装插件来扩展其功能.ChatGPT 是一款基于 OpenAI 的 GPT-3 语言模型的聊天机器人插件,可以让 VSCode 具备聊天机器人的功能. 要在 ...
- 踩坑:vue-particles粒子插件在IE中出现空白,报错:缺少“:”
国际惯例,按照步骤使用npm安装了vue-particles插件,项目跑起来后,在chrome,Edge以及safari中都没有什么问题,但是在IE中出现了空包页现象,没有报错,在强刷页面后出现 缺少 ...
- 踩坑之用lrz插件进行图片压缩
项目有一个需求,压缩图片到指定大小,比如缩略图到52kb大图5M.一开始用的插件localResizeIMG,但它没有压缩到指定大小的,就想着是不是可以循环调用这个插件,后来发现它的一个参数quali ...
- vscode 新版eslint自动修复_vscode自动修复eslint规范的插件及配置
在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...
- 关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于 计算机基础与开发工具 标签: vscode 保存自动fix,vscode 保存执行fix,esli ...
- jmeter 3版本到5版本踩坑之路
jmeter 3-5版本升级踩坑路 新版本下载安装 踩坑之路 新版本下载安装 下载新版本软件 ,链接: https://jmeter.apache.org/download_jmeter.cgi: 配 ...
- VScode 乱装插件环境破坏踩坑自我反思总结
VScode 乱装插件环境破坏踩坑自我反思总结 1.2021-01-18早上由于百度 <Vscode 常用插件推荐>,瞎装了插件,把自己的Vscode环境给破坏了 2.在文件-首选项-设置 ...
最新文章
- 为什么用IP无法访问网站,域名可以访问?
- Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Scale/Scale的Command)
- express运行www后,在http://localhost:3000/查看返回会报 Cannot find module 'jade'
- 【Python基础】快速入门Python(讲解、习题)
- 浅聊一下各类以太网媒体接口MII/RMII/SMII/GMII/RGMII/SGMII
- ps作业素材和成品_没有用过PS的画框工具,你还敢说你是设计大佬?
- 前端学习(2183):tabber--基本架构的构建
- 字符串匹配算法(BM)
- react hooks_如何破坏React Hooks的基础
- python绘制汉字_OpenCV Python 绘制中文字
- URAL 1022 Genealogical Tree
- ExtJs4 基础必备
- 浅析HEVC/H.265编码器中的熵编码
- IOS 蓝牙开发(六)蓝牙手柄 GameController开发
- 音频LINE OUT,LINE IN接口
- c语言如何编辑数学公式,怎样用C语言编写数学公式
- 2019-7-2-WPF-通过-ReadyToRun-提升性能
- wy-征地话题中一位兄弟的评论
- 鸿蒙荣耀v40,荣耀V40系列放料:高配麒麟9000,将搭载鸿蒙2.0
- 三、12.13.14.15.编写三角形类Triangle
热门文章
- android视频录制无图像,Android开发拍摄视频在图库不显示问题
- (57)FPGA条件选择无优先级(case)
- arm linux 交叉编译boost库
- STM32f407与STM32F103 串口采用DMA收发数据配置方法的异同
- Linux内核分析 - 网络[八]:IP协议
- Java学习日报—消息队列—2021/11/23
- 云端服务器怎么维护,云端服务器怎么维护
- 计算机的试题步骤,计算机二级题目 做计算机二级试题,按照答案步骤,为什么word 爱问知识人...
- java kafka client_Kafka Client API 基本使用
- java复习系列[3] - Java虚拟机