Vue中使用eslint

.eslintrc.js

module.exports = {
    root: true,
    parser: ‘babel-eslint‘,
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    extends: ‘vue‘,
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": false
        },
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            "tab"
        ],//tab空格
        eqeqeq: 0,//禁止检测等于比较
        ‘no-console‘: 0,//禁止检测console
        "linebreak-style": [
            "error",
            "unix"
        ],
        ‘camelcase‘:0,//禁止检测命名
        ‘consistent-this‘:0,//禁止检测命名
        ‘no-else-return‘: "error",
        "quotes": [
            "error",
            "single"
        ],//单引号
        "semi": [
            "warn",
            "never"
        ]//不适用分号
    }
};

webpack.config加入如下代码

{
			test: /\.(js|vue)$/,
			loader: ‘eslint-loader‘,
			enforce: ‘pre‘,
			include: [resolve(‘src‘), resolve(‘test‘)],
			options: {
          // formatter: require(‘eslint-friendly-formatter‘),
          // 不符合Eslint规则时只警告(默认运行出错)
          // emitWarning: !config.dev.showEslintErrorsInOverlay
			}
		},

  下载editorconfig插件

  

root = true
# 对所有文件有效  //[*js]只对js文件有效
[*]
#设置编码格式
charset = utf-8
#缩进类型  可选space和tab
indent_style = tab
#缩进数量可选整数值2 or 4,或者tab
indent_size = tab
#换行符的格式
end_of_line = lf
# 是否在文件的最后插入一个空行  可选true和false
insert_final_newline = false
# 是否删除行尾的空格  可选择true和false
trim_trailing_whitespace = true

  配置不希望eslint监测的文件

.eslintignore

# /node_modules/* and /bower_components/* in the project root are ignored by default

# Ignore built files except build/index.js
dist/*
!dist/index.js
src/vendor.js
README.md

  

  vscode编译器在使用eslint的时候添加如下配置,可以减少fix

  

"eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]

  

  以上就是eslint的全部配置了!

原文地址:https://www.cnblogs.com/yiyi17/p/9238072.html

时间: 2024-11-08 23:42:54

Vue中使用eslint的相关文章

在Vue中关闭Eslint 的方法

初学者建议先不用eslint,熟悉一点了再用,不然代码全都过不了 关闭方法 然后打开webpack.base.conf.js找到 然后注释掉就可以了 原文地址:https://www.cnblogs.com/pangbo1213/p/8566737.html

Vue中ESlint配置文件eslintrc.js文件详解

最近在跟着视频敲项目时,代码提示出现很多奇奇怪怪的错误提示,百度了一下是eslintrc.js文件没有配置相关命令,ESlint的语法检测真的令人抓狂,现在总结一下这些命令的解释,方便以后查阅. 默认eslint规则: 代码末尾不能加分号 ;(强迫症的我受不了)代码中不能存在多行空行:(这个我更也忍不了)tab键不能使用,必须换成两个空格:(超级不习惯)代码中不能存在声明了但未使用的变量:(这个我觉得可以有) 最简单的方法,关闭eslint检测,其实很简单,把 build/webpack.bas

vue项目关闭eslint校验

[前言] eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格.这篇文章主要介绍了vue项目关闭eslint校验,需要的朋友可以参考下 [主体] 简介eslint eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格. 官方文档:https://eslint.org 这篇文章总结了eslint的规则:Eslint规则说明 关闭eslint校验 有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

vue中的vue-cli

在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 这个命令行,安装,安装之后检查cnpm的版本 cnpm -v 之后创建项目文件进入项目文件中,在comd中下载vue-cli cnpm install vue-cli -g --s

如何在Vue中建立全局引用或者全局命令

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到到相同模块.我们不想每个文件都import 一次模块. 如果是vue编写的插件我们可以用 Vue.use(...) 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦 第三部步:在main.js(入口

better-scroll在vue中的应用

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 -> 钱包->滴滴出行"体验效果. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在 这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 不少同学可能用过 better-scroll,我收到反馈最多

Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6 在使用axios发送请求时,服务器端设置 res.header("Access-Control-Allow-Origin", "*");可以正确得到结果 当服务器端不设置允许跨域时,使用jsonp方式发送就不行了,提示错误如下 XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Acce