前端知识(二)05-Eslint语法规范检查-谷粒学院
一、ESLint简介
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,推荐 ESLint+vscode 来写 vue,有种飞一般的感觉。
每次保存,vscode就能标红不符合ESLint规则的地方,同时还会做一些简单的自我修正。
二、启用ESLint
1、ESLint插件安装
vs code的ESLint插件,能帮助我们自动整理代码格式
2、插件的扩展设置
选择vs code左下角的“设置”, 打开 VSCode 配置文件,添加如下配置
文件中添加如下配置:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
添加后如下:
这样每次保存的时候就可以根据根目录下 .eslintrc.js 你配置的ESLint规则来检查和做一些简单的fix
3、确认开启语法检查
打开 config/index.js,配置是否开启语法检查
useEslint: true,
三、ESLint规则说明
参考:http://eslint.cn/docs/user-guide/getting-started
1、规则说明
你可以在 .eslintrc 文件中看到许多像这样的规则:
{
rules: {
'semi': [2, 'never'], //不使用分号,否则报错
'quotes': [2, 'single'] //使用单引号,否则报错
}
}
"semi" 和 "quotes" 是 ESLint 中 规则 的名称。第一个值是错误级别,可以使下面的值之一:
- "off" or 0 - 关闭规则
- "warn" or 1 - 将规则视为一个警告
- "error" or 2 - 将规则视为一个错误
2、语法规则
本项目的语法规则包括:
- 两个字符缩进
- 使用单引号
- 语句后不可以写分号
- 等
前端知识(二)05-Eslint语法规范检查-谷粒学院的更多相关文章
- 前端知识(二)03-Webpack-谷粒学院
目录 一.什么是Webpack 二.Webpack安装 1.全局安装 2.安装后查看版本号 三.创建项目 1.初始化项目 2.创建src文件夹 3.src下创建common.js 4.src下创建ut ...
- 前端知识(二)01-NPM包管理器-谷粒学院
目录 一.简介 二.使用npm管理项目 1.项目初始化 2.修改npm镜像 3.npm install命令的使用 4.其它命令 一.简介 什么是NPM NPM全称Node Package Manage ...
- js eslint语法规范错误提示代码
最近在用eslint代码检测,因为之前不太注意代码规范,刚开始确实头疼,哈哈,不过用习惯了就会感觉还不错,其实也没有那样难调试 我看过之前有些人已经做过总结,自己记录下,方便自己以后查找 “Missi ...
- eslint语法规范
规则 缩进使用两个空格. eslint: indent function hello (name) { console.log('hi', name) } 1 2 3 字符串使用单引号,除 ...
- 【IDE】WebStorm 调整Tab缩进为2空格 -- 为遵循ESLint语法规范
步骤一 修改这三处的值为:2 步骤二 把这两处默认的勾选去掉,不让其detection当前文件的Tab缩进 注意! 通过上面两个步骤,我们只是改变了在JS文件的Tab缩进改为2个空格 但是,*.vue ...
- 前端知识(二)08-Vue.js的路由-谷粒学院
目录 一.锚点的概念 二.路由的作用 三.路由实例 1.复制js资源 2.创建 路由.html 3.引入js 4.编写html 5.编写js 一.锚点的概念 案例:百度百科 特点:单页Web应用,预先 ...
- 前端知识(二)04-vue-element-admin-谷粒学院
目录 一.vue-element-admin 1.简介 2.安装 二.vue-admin-template 1.简介 2.安装 一.vue-element-admin 1.简介 vue-element ...
- 前端知识(一)05 axios-谷粒学院
目录 一.axios的作用 二.axios实例 1.复制js资源 2.创建 axios.html 3.引入js 4.启动课程中心微服务 5.编写js 6.html渲染数据 7.跨域 8.使用生命周期函 ...
- JSLint检测Javascript语法规范
前端javascript代码编写中,有一个不错的工具叫JSLint,可以检查代码规范化,压缩JS,CSS等,但是他的语法规范检查个人觉得太“苛刻”了,会提示各种各样的问题修改建议,有时候提示的信息我们 ...
随机推荐
- Java获取到异常信息进行保存(非Copy)
吐槽:不知道从什么时候开始,各大博客网站的文章开始各种复制粘贴,想好好找一个解决方法,搜索出来的博客基本上千篇一律,主要是能解决问题也还行,还解决不了问题这就恶心了.... 所以被迫自己写一篇文章,然 ...
- ASP.NET Web API运行提示:找到了与该请求匹配的多个操作的解决方法
- select * from 多张表的用法
select * from 多张表的用法 其实就是 inner join select * from Class c,Student s where c.ClassID=s.ClassID ...
- Springboot 源码解析-自定装配
面试官经常会问你知道springboot的自定装配吗?它是怎么实现的吗?今天我们就来通过源码一起分析下它吧.首先我们先搭建一个springboot的简单项目,找到启动类, 然后通过这个注解我们进入到@ ...
- Echarts数据可视化,easyshu图表集成。
介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...
- Idea利用maven创建web项目,并配置tomcat
参考http://blog.csdn.net/myarrow/article/details/50824793#comments
- Java学习日报7.21
package leap;import java.util.Scanner;public class Leap {public static void main(String args[]) { in ...
- Linux 时间同步 05 chrony时间同步
Linux 时间同步 05 chrony时间同步 目录 Linux 时间同步 05 chrony时间同步 chrony 的优势: chrony包介绍 安装chrony 配置与外部时间服务器进行时间同步 ...
- 零基础学习python
一.python的注释方式: (1)python的单行注释: ctrl+/ # print('Hello World!') 这是当行注释 (2)python的多行注释: ''' ''' ' ' ' ...
- 再看C语言-算法
通常一个程序包括算法.数据结构.程序设计方法及语言工具和环境这四个方面.其中算法是核心,算法就是解决"做什么"和"如何做"的问题.算法是程序的灵魂,项目中如果接 ...