本文以 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
版权声明:本文为博主原创文章,转载请附上博文链接!

踩坑:VScode 集成 eslint 插件的更多相关文章

  1. vscode的eslint插件不起作用

    最近在用vue进行开发,但是vsCode中的eslint插件装上之后不起作用 1.vsCode打开“设置”,选择"settings.json" 2.输入一段脚本 "esl ...

  2. vscode 添加eslint插件

    1. 安装vscode中的eslint插件 Ctrl + Shift + P 调出控制台,输入install,再在插件版块查找ESLint,安装 2. 安装node,安装npm 3. 全局安装ESLi ...

  3. vscode集成eslint

    1. 安装 ESLint 扩展 首先,打开 VSCode 扩展面板并搜索 ESLint 扩展,然后点击安装 2. 项目安装eslint yarn add eslint -D 3. 设置eslint配置 ...

  4. vscode安装eslint插件,代码统一自动修复

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

  5. vscode中eslint插件的配置-prettier

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个esli ...

  6. electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  7. vscode 中 eslint prettier 和 eslint -loader 配置关系

    前置 本文将探究 vscode prettier 插件 和 eslint 插件在 vscode 中的配置以及这两者对应的在项目中的配置文件的关系,最后提及 vscode eslint 插件配置与 es ...

  8. vscode自动修复eslint规范的插件及配置

    在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...

  9. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

随机推荐

  1. springBoot2.x 支持跨域请求配置

    提供三种配置方式: 1.配置过滤器,实现 WebMvcConfigurer接口(springboot2.x的方式) @Configuration public class GlobalCorsConf ...

  2. Repeater循环页面上的控件

    List<string> list = new List<string>(); for (int k = 0; k < RepeaterList.Items.Count; ...

  3. C#中UDP(Socket)

    1 使用无连接的套接字,我们能够在自我包含的数据包里发送消息,采用独立的读函数读取消息,读取的消息是使用独立的发送函数发送的.但是UDP数据包不能保证可靠传输,存在许多的因素,比如网络繁忙等等,都有可 ...

  4. 线程----code

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 如何使用ProcessOn制作思维导图

    新建一张思维导图之后你是不是有点茫然? 不是因为脑海里没思路,而是不知道怎么把脑海里的思路呈现出来?看到一个孤零零的中心主题和看起来有些简单的页面一时间有点无所适从? 很多人觉得思维导图好看但学起来难 ...

  6. zabbix 自定义Key (六)

    1.在zabbix_agent端zabbix_agentd.conf配置文件中增加自定义Key(/usr/local/zabbix_agent/etc/zabbix_agentd.conf) ### ...

  7. Cobbler自动化装机脚本

    #!/bin/bash ens33_ip=192.168.1.3 ens33_gateway=192.168.1.1 ens37_ip=192.168.207.2 dhcp_wd=192.168.20 ...

  8. 查看是否用GPU跑的TensorFlow程序

    查看是否用GPU跑的TensorFlow程序 第一种方法,直接输出日志法(推荐) import tensorflow as tf sess = tf.Session(config=tf.ConfigP ...

  9. [ZOJ 4025] King of Karaoke

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5766 求两个序列的相对元素的差出现次数最多的,最低出现一次. AC代 ...

  10. Task扩展方法取消操作

    /// <summary> /// 任务扩展,传入取消操作 /// </summary> public static class TaskExtensionDemo { //因 ...