前端构建工具（1）-- 代码检查 --ESlint

wendux 发布于2019-08-22 16:30 / 3352人阅读

摘要：简介检查我们写的代码是否满足指定规则的静态代码检查工具。作用作为代码检查工具，其作用主要有以下几点统一代码风格规则，如缩进用几个空格是否用驼峰命名法来命名变量和函数名等。

1、简介：

eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。

ESHint 和 JSLint 也是静态代码检查工具，但伴随着发展，他们已经无法满足需求，于是ESlint 诞生了，因次ESlint比它们功能更强大也更灵活。

ESLint 是用 Node.js 写的，可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。

2、作用

ESlint作为代码检查工具，其作用主要有以下几点：

统一代码风格规则，如：缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。

减少错误，如：相等比较必须用 ===，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。

提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。

其他。如：禁用alert。这可以提高用户体验，因为 alert 框的外观不是那么好看，而且往往与网站的风格不搭，一般都会自定义 alert 框。

3、安装&配置

eslint可以用npm 安装依赖,用-g是全局安装

npm install -g eslint

初始化eslint配置，在用户文件中会生成一个eslint配置文件，即.eslintrc.js

eslint --init

然后可以在.eslintrc的文件进行配置:

env: 指定代码的运行环境,设置了代码的运行环境可以是代码检测时，不会将运行环境预定义的全局变量视为没有定义

"env": {
       "browser": true,
       "commonjs": true,
       "es6": true
    },

parserOptions: 设置js版本的支持情况和jxs的支持情况。ecmaVersion 指定用哪个ECMAScript 的版本，默认是 3 和 5。

"parserOptions": {
       "ecmaVersion": 6
   }

globals：额外的全局变量，将需要使用的全局变量设置为ture,在代码检测时该全局变量则不会报未定义的错误

"globals": {
   "sap": true,
   "jQuery": true,
   "_": true,
   "$": true,
   "Promise": true,
   "QUnit": true,
   "sinon": true
},

rules: 具体检查的规则，可以使用extends: eslint recommoned采用推荐的检查规则，也可以自己对一些规则进行自定义，第一个参数是表示该规则检查出来的是 off / 0 :不检查，warn / 1 :错误，error /2 警告

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "no-mixed-spaces-and-tabs": "error"
    "camelcase": "error",
    "eqeqeq": "warn",
    "curly": "error",
    "no-undef": "error",
    "no-unused-vars": "warn",
    "max-params": "warn"
  }
}

4、错误修改

具体的报错信息可以参考https://eslint.org/docs/3.0.0...

私有云混合云前端构建构建工具 android构建工具检查工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94416.html

从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

call_me_R 2019-08-23 13:43 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

wzyplus 2019-08-02 12:08 评论0 收藏0
从 0 到 1 再到 100, 搭建、编写、构建一个前端项目

摘要：从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后，需要一个版本控制系统来管理源代码。从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。 ...

aristark 2019-08-29 17:24 评论0 收藏0
前端进阶（13） - 搭建自己的前端脚手架

摘要：搭建自己的前端脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用等命令行工具，也可以直接用等模板，如果这些都不能满足你的个性化需求，可以尝试搭建自己的前端脚手架。搭建自己的前端脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。搭建脚手架可以用 create-react-app、vue-cli、yeoman 等命令行...

lykops 2019-08-26 12:20 评论0 收藏0
前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier,

摘要：前端开发需要了解的工具集合前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。总之，是前端打包的不二选择。所以，很多情况下都是与配合使用。它的一个理念就是提供一套完整集成的零配置测试体验。前端开发需要了解的工具集合：webpack, eslint, prettier, ... 前端开发需要了解的一些工具，这些工具能够帮助你在项目开发中事半功倍。 1. nrm: npm...

SillyMonkey 2019-08-29 16:44 评论0 收藏0