精华内容
参与话题
问答
  • eslint

    万次阅读 2017-11-12 15:20:34
    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。 首先,安装 ESLint。 $ npm i -g eslint 然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。 $ npm i -g ...

    es6笔记 习自 阮一峰开源项目 

    查看es6的浏览器支持情况kangax.github.io/es5-compat-table/es6/


    ESLint的使用

    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

    首先,安装 ESLint。

    $ npm i -g eslint

    然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。

    $ npm i -g eslint-config-airbnb
    $ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

    最后,在项目的根目录下新建一个.eslintrc文件,配置ESLint。

    {
      "extends": "eslint-config-airbnb"
    }

    现在就可以检查,当前项目的代码是否符合预设的规则。

    index.js文件的代码如下。

    var unusued = 'I have no purpose!';
    
    function greet() {
        var message = 'Hello, World!';
        alert(message);
    }
    
    greet();

    使用 ESLint 检查这个文件,就会报出错误。

    $ eslint index.js
    index.js
      1:1  error  Unexpected var, use let or const instead          no-var
      1:5  error  unusued is defined but never used                 no-unused-vars
      4:5  error  Expected indentation of 2 characters but found 4  indent
      4:5  error  Unexpected var, use let or const instead          no-var
      5:5  error  Expected indentation of 2 characters but found 4  indent
    
    ✖ 5 problems (5 errors, 0 warnings)

    上面代码说明,原文件有五个错误,其中两个是不应该使用var命令,而要使用letconst;一个是定义了变量,却没有使用;另外两个是行首缩进为4个空格,而不是规定的2个空格。








    展开全文
  • Eslint

    2019-11-22 09:15:39
    Eslint 参考资料:https://cn.eslint.org/docs/rules/ 安装eslint步骤:http://note.youdao.com/noteshare?id=302a125b6cae06210ebc04431e12c10b vscode插件:...

    Eslint

    参考资料:https://cn.eslint.org/docs/rules/
    安装eslint步骤:http://note.youdao.com/noteshare?id=302a125b6cae06210ebc04431e12c10b
    vscode插件:https://note.youdao.com/ynoteshare1/index.html?id=cea39d6f7550ec859ade422e53b96408&type=note
    husky: https://note.youdao.com/ynoteshare1/index.html?id=21f649601fe9d81055bd08fa2981599c&type=note
    eslint规则:https://note.youdao.com/ynoteshare1/index.html?id=7d7257dd0c56d138e23a308e64da02ee&type=note

    1.安装步骤

    1.

    2.初始化配置文件

    在这里插入图片描述

    3.安装第一步

    在这里插入图片描述

    配置

    在这里插入图片描述

    4.安装prettier

    在这里插入图片描述

    5.插件

    在这里插入图片描述

    6.安装babel依赖

    在这里插入图片描述

    7.配置文件

    在这里插入图片描述在这里插入图片描述

    8.vscode插件

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    生成文件
    在这里插入图片描述

    9.配置setting.json

    在这里插入图片描述

    10.eslint规则

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    11.husky注册git hook

    在这里插入图片描述

    12.实现过程

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • ESLint

    2019-10-02 08:40:53
    前言 作为一名程序员都知道代码的规范性不止...今天看到一篇关于介绍ESLint的文章,文章里基本上把ESLint中常用的配置都加上了中文的解释,这无疑是便于阅读与理解。ESLint中的规则配置有很多,可以根据个人/团队后...

    前言

    作为一名程序员都知道代码的规范性不止可以养成个人的编程习惯,还可以便于团队合作间代码的阅读。近几年也衍生出了很多代码检查工具,从JSLint,JSHint到ESLint,都给程序员们提供了良好的代码检查工具。

    今天看到一篇关于介绍ESLint的文章,文章里基本上把ESLint中常用的配置都加上了中文的解释,这无疑是便于阅读与理解。ESLint中的规则配置有很多,可以根据个人/团队后者项目的需求去进行配置。

    ESLint 支持几种格式的配置文件:

    • JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
    • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
    • JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
    • (弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。
    • package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。

      如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

      • .eslintrc.js
      • .eslintrc.yaml
      • .eslintrc.yml
      • .eslintrc.json
      • .eslintrc
      • package.json

    .eslintrc.js配置文件

    // .eslintrc.js
    module.exports = {
        // 指定解析器
        'parse': '',
        // 指定解析器选项
        'parserOptions': {
            // 默认设置为3,5(默认),可使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。也可使用年份命名的版本号指定为 2015(同 6),2016(同7),或 2017(同8)或 2018(同9)
            "ecmaVersion": 6,
            // 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。
            "sourceType": "module",
            // 对象,表示想使用的额外的语言特性
            "ecmaFeatures": {
                "jsx": true  // 启用 JSX
                "globalReturn": true  // 允许在全局作用域下使用 return 语句
                "impliedStrict": true  // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
            }
        },
        // 指定脚本的运行环境
        'env': {},
        // 别人可以直接使用你配置好的ESLint, ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
        'root': true,
        // 脚本在执行期间访问的额外的全局变量
        'globals': {},
        // 使用 "extends": "eslint:recommended" 可启用推荐的规则
        "extends": "eslint:recommended",
        // 启用的规则及其各自的错误级别
        'rules': {
            "semi": 2
        }
    };

    ESLint规则

    为了对规则有个更好的理解,ESLint 对其进行了分门别类。下面是每个类别中比较常用的规则。

    Possible Errors (JavaScript 代码中可能的错误或逻辑错误)

    规则 解释
    no-console 禁用 console
    no-await-in-loop 禁止在循环中出现 await
    no-cond-assign 禁止条件表达式中出现赋值操作符
    no-constant-condition 禁止在条件中使用常量表达式
    no-debugger 禁用 debugger
    no-dupe-args 禁止 function 定义中出现重名参数
    no-dupe-keys 禁止对象字面量中出现重复的 key
    no-duplicate-case 禁止出现重复的 case 标签
    no-empty 禁止出现空语句块
    no-empty-character-class 禁止在正则表达式中使用空字符集
    no-extra-boolean-cast 禁止不必要的布尔转换
    no-extra-parens 禁止不必要的括号
    no-extra-semi 禁止不必要的分号
    no-func-assign 禁止对 function 声明重新赋值
    no-inner-declarations 禁止在嵌套的块中出现变量声明或 function 声明
    no-irregular-whitespace 禁止在字符串和注释之外不规则的空白
    no-obj-calls 禁止把全局对象作为函数调用
    no-regex-spaces 禁止正则表达式字面量中出现多个空格
    no-unreachable 禁止在return、throw、continue 和 break 语句之后出现不可达代码
    valid-typeof 强制 typeof 表达式与有效的字符串进行比较

    Stylistic Issues (关于风格指南)

    规则 解释
    array-bracket-newline 在数组开括号后和闭括号前强制换行
    array-bracket-spacing 强制数组方括号中使用一致的空格
    array-element-newline 强制数组元素间出现换行
    block-spacing 禁止或强制在代码块中开括号前和闭括号后有空格
    brace-style 强制在代码块中使用一致的大括号风格
    camelcase 强制使用骆驼拼写法命名约定
    comma-dangle 要求或禁止末尾逗号
    comma-style 强制使用一致的逗号风格
    computed-property-spacing 强制在计算的属性的方括号中使用一致的空格
    eol-last 要求或禁止文件末尾存在空行
    func-call-spacing 要求或禁止在函数标识符和其调用之间有空格
    function-paren-newline 强制在函数括号内使用一致的换行
    implicit-arrow-linebreak 强制隐式返回的箭头函数体的位置
    indent 强制使用一致的缩进
    jsx-quotes 强制在 JSX 属性中一致地使用双引号或单引号
    multiline-ternary 要求或禁止在三元操作数中间换行
    new-cap 要求构造函数首字母大写
    new-parens 要求调用无参构造函数时有圆括号
    eqeqeq 要求使用 === 和 !==
    no-trailing-spaces 禁用行尾空格

    ECMAScript 6

    规则 解释
    no-const-assign 禁止修改 const 声明的变量
    no-dupe-class-members 禁止类成员中出现重复的名称
    no-duplicate-imports 禁止重复模块导入
    no-restricted-imports 禁止使用指定的 import 加载的模块
    no-this-before-super 禁止在构造函数中,在调用 super() 之前使用 this 或 super
    no-useless-computed-key 禁止在对象中使用不必要的计算属性
    no-useless-constructor 禁用不必要的构造函数
    no-useless-ren 要求使用 let 或 const 而不是 var
    object-shorthand 要求或禁止对象字面量中方法和属性使用简写语法
    prefer-arrow-callback 要求回调函数使用箭头函数
    prefer-const 要求使用 const 声明那些声明后不再被修改的变量

    转载于:https://www.cnblogs.com/Emily-mei/p/9106007.html

    展开全文
  • EsLint

    2019-09-07 21:43:26
    eslint 是代码规范的一种工具,下面我们来看看使用eslint 如何比较好地在webpack 中配置。 先,我们下载eslint 到项目。 npm install eslint --save-dev 然后,我们可以使用命令初始化eslint 的配置文件(/....

    eslint 是代码规范的一种工具,下面我们来看看使用eslint 如何比较好地在webpack 中配置。

    先,我们下载eslint 到项目。

    npm install eslint --save-dev

    然后,我们可以使用命令初始化eslint 的配置文件(/.eslintrc.js)

    npx eslint --init

    按照它给我们的问题选择好选项后,就会在项目根目录下生成eslint 的配置文件 .eslintrc.js 

    此时,我们想要查看代码是否符合eslint 配置中的要求,可以在命令行使用命令:

    npx eslint src

    这行代码,就会使得eslint 去检测src 下的代码是否符合规则。

    在VS code 中,我们可以安装 eslint 插件,这样就可以在编辑器内直接看到代码的不符合规范的地方了。

    展开全文

空空如也

1 2 3 4 5 ... 20
收藏数 13,424
精华内容 5,369
关键字:

eslint