eslint-config-prettier, 关闭所有不必要的规则或者可能与漂亮的冲突

分享于 

15分钟阅读

GitHub

  繁體 雙語
Turns all rules that are unnecessary or might conflict with prettier off.
  • 源代码名称:eslint-config-prettier
  • 源代码网址:http://www.github.com/prettier/eslint-config-prettier
  • eslint-config-prettier源代码文档
  • eslint-config-prettier源代码下载
  • Git URL:
    git://www.github.com/prettier/eslint-config-prettier.git
    Git Clone代码到本地:
    git clone http://www.github.com/prettier/eslint-config-prettier
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/prettier/eslint-config-prettier
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    eslint-config-prettier Build Status

    关闭所有不必要的或者可能与冲突的规则。

    这使你可以使用你喜欢的可以共享配置,而不允许它的样式选择在使用更漂亮的时候使用。

    安装

    提示:首先,你可能对安装 eslint-plugin-prettier服务感兴趣。 按照那边的指示操作。 这是可选的,尽管。

    安装 eslint-config-prettier:

    
    $ npm install --save-dev eslint-config-prettier
    
    
    
    

    然后,将eslint-config-prettier添加到 .eslintrc.* 文件中的"扩展"array。 最后,请确定它的价格为 ,这样就有机会替代其他配置。

    {
     "extends": [
     "prettier" ]
    }

    还支持几个ESLint插件:

    为你使用的插件添加额外的排除,如下所示:

    {
     "extends": [
     "prettier",
     "prettier/flowtype",
     "prettier/react",
     "prettier/standard" ]
    }

    helper-工具

    eslint-config-prettier还附带了一个小的CLI工具来帮助你检查配置是否包含任何不必要或者冲突的规则。

    首先,为 package.json 添加一个脚本:

    {
     "scripts": {
     "eslint-check": "eslint --print-config. eslintrc.js | eslint-config-prettier-check" }
    }

    然后运行 npm run eslint-check

    ( 如果需要,请用你的配置的路径交换 eslintrc。

    退出代码:

    • 0: 没有发现问题。
    • 1: 意外错误。
    • 2: 发现冲突的规则。

    示例配置

    {
     "extends": [
     "standard",
     "plugin:flowtype/recommended",
     "plugin:react/recommended",
     "prettier",
     "prettier/flowtype",
     "prettier/react",
     "prettier/standard" ],
     "plugins": [
     "flowtype",
     "react",
     "prettier",
     "standard" ],
     "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {
     "jsx": true }
     },
     "env": {
     "es6": true,
     "node": true },
     "rules": {
     "prettier/prettier": "error" }
    }

    特殊规则

    有一些eslint-config-prettier禁用的规则实际上可以在某些情况下启用。

    • 有些需要某些选项 CLI helper 工具验证这里选项。
    • 编写代码时有些需要特别注意。 如果启用了这些规则,CLI helper 工具会警告你,但无法判断是否有问题。

    为了最大程度地使用,默认情况下禁用特殊规则。 如果需要,你需要在ESLint配置中显式地指定它们。

    这个规则收费需要一定的。

    如果 block ( 例如 ifelsefor 或者 while 之后) 只包含一个语句,JavaScript允许省略该语句中的花括号。 如果省略这些可选的大括号,则强制执行这里规则。

    如果你使用 "multi-line" 或者 "multi-or-nest" 选项,则规则可能与漂亮的。

    例如 "multi-line" 选项允许此行:

    if (cart.items&&cart.items[0] &&cart.items[0].quantity===0) updateCart(cart);

    但是,漂亮的可能会认为线条太长,并将它的转换成下面的内容,而 "multi-line" 选项不允许这样做。允许:

    if (cart.items&&cart.items[0] &&cart.items[0].quantity===0)
     updateCart(cart);

    如果你喜欢这个规则,只要你不使用 "multi-line" 或者 "multi-or-nest" 选项,它就可以使用更美观。

    配置示例:

    {
     "rules": {
     "curly": ["error", "all"]
     }
    }

    lines-around-comment

    这里规则可以与特定选项一起使用。

    这里规则需要在注释之前或者/或者之后空行。 漂亮的保留空行,但有两个例外:

    • 一行中的几个空行折叠成一个空行。 这很好。
    • 块的开头和结尾。对象和数组的空行始终被移除。 这可能导致冲突。

    默认情况下,ESLint需要一个空行 上面 注释是以下情况:

    if (result) {
     /* comment */return result;
    }

    但是,漂亮的删除了空行:

    if (result) {
     /* comment */return result;
    }

    如果你喜欢这个规则,只要添加一些额外的配置,就可以使用对象和数组。

    配置示例:

    {
     "rules": {
     "lines-around-comment": [
     "error",
     {
     "beforeBlockComment": true,
     "afterBlockComment": true,
     "beforeLineComment": true,
     "afterLineComment": true,
     "allowBlockStart": true,
     "allowBlockEnd": true,
     "allowObjectStart": true,
     "allowObjectEnd": true,
     "allowArrayStart": true,
     "allowArrayEnd": true }
     ]
     }
    }

    在编写代码时需要特别注意这里规则。

    通常,Prettier会自动处理最大行长度。 但是,有些情况下,漂亮的内容不能做任何事情,比如长字符串。正规表达式 和注释。 那些需要被人分割出来的人。

    如果你希望实施更严格的最大行长策略比美丽,可以自动提供这里规则。 请记住保持 max-len 选项和 printWidth 选项同步同步。

    请记住,如果使用 max-len 规则不批准的方式,可以能需要稍微重构代码。

    配置示例:

    {
     "rules": {
     "max-len": ["error", {"code": 80, "ignoreUrls": true}]
     }
    }

    no-confusing-arrow

    这个规则收费需要一定的。

    例如规则可能会警告这一行:

    varx=a=>1?2:3;

    默认情况下,ESLint建议切换到显式返回:

    varx=a=> { return1?2:3; };

    这不会造成更漂亮的问题。

    对于 {allowParens: true},添加括号也被认为是避免箭头混淆的有效方法:

    varx=a=> (1?2:3);

    尽管更美观的是thoses括号,但如果线条足够长,则可以引入换行符:

    EnterpriseCalculator.prototype.calculateImportantNumbers=inputNumber=>1?2:3;

    如果你喜欢这个规则,只要 allowParens 选项关闭,它就可以使用更美观。

    配置示例:

    {
     "rules": {
     "no-confusing-arrow": "error" }
    }

    no-mixed-operators

    在编写代码时需要特别注意这里规则。

    这里规则禁止混合某些运算符,如 &&||

    例如规则可能会警告这一行:

    var foo = a + b * c;

    规则建议添加括号,如下所示:

    var foo = a + (b * c);

    但是,漂亮的删除了许多"不必要的"括号,将它的转换为:

    var foo = a + b * c;

    如果要使用漂亮的规则,则需要将表达式拆分为另一个变量:

    var bar = b * c;var foo = a + bar;

    但是要记住,漂亮的打印一些的"不必要的"括号,虽然:

    var foo = (a && b) || c;

    配置示例:

    {
     "rules": {
     "no-mixed-operators": "error" }
    }

    没有制表符

    这条规则需要花费一定的。

    这里规则不允许在所有的情况下使用制表符。 只要不使用选项卡配置更美观,就可以使用更美观的方法。

    配置示例:

    {
     "rules": {
     "no-tabs": "error" }
    }

    no-unexpected-multiline

    在编写代码时需要特别注意这里规则。

    这里规则不允许混淆的多行表达式,它的中换行符似乎结束一个语句,但不是。

    例如规则可能会警告:

    var hello ="world"[1, 2, 3].forEach(addNumber)

    更漂亮的通常用以使分号丢失的方式格式化这种情况:

    var hello ="world"[(1, 2, 3)].forEach(addNumber);

    但是,有些情况下更美观地将事情分成几行,这样 no-unexpected-multiline 冲突。

    constvalue=text.trim().split("n")[position].toLowerCase();

    更漂亮的是将它分成几行,但导致冲突:

    constvalue= text
    . trim()
    . split("n")
     [position].toLowerCase();

    如果你喜欢这个规则,它通常可以用更漂亮的方式使用,但偶尔需要暂时禁用规则或者重构代码。

    constvalue= text
    . trim()
    . split("n")
     // eslint-disable-next-line no-unexpected-multiline [position].toLowerCase();// Or:constlines=text.trim().split("n");constvalue= lines[position].toLowerCase();

    注意:如果你不做,那么你必须运行ESLint和漂亮的作为两个单独的步骤,以得到任何价值。 否则更漂亮的可能会使你的代码重新格式化,以便ESLint永远无机会报告任何( 如第一个示例中所见)。

    配置示例:

    {
     "rules": {
     "no-unexpected-multiline": "error" }
    }

    报价

    这个规则收费需要一定的。

    如果希望强制使用,而不是单引号或者双引号,则可以启用这里规则。 否则,就不需要。 只需记住启用 "backtick" 选项 !

    配置示例:

    {
     "rules": {
     "quotes": ["error", "backtick"]
     }
    }

    eslint-config-prettier已经进行了测试:

    • ESLint 4.12.0 ( eslint-config-prettier 2.1.1和更老版本均用 ESLint 3。x 测试过)
    • 漂亮 1.8.2
    • eslint-plugin-flowtype 2.39.1
    • eslint-plugin-react 7.5.1
    • eslint-plugin-standard 3.0.1

    添加了新规则,因为这些版本? 我们有没有遗漏任何规则? 是否有一个插件,你想看到排除? 打开问题或者请求请求 !

    如果你想添加对eslint-plugin-foobar的支持,这就是你将如何进行的操作:

    首先,创建 foobar.js:

    "use strict";module.exports= {
     rules: {
     "foobar/some-rule":"off" }
    };

    然后,创建 test-lint/foobar.js:

    /* eslint-disable quotes */"use strict";// Prettier does not want spaces before the parentheses, but// eslint-config-foobar wants one.console.log ();

    在同时使用eslint-plugin-foobar和 eslint-plugin-prettier - 直到 "prettier/foobar" 被添加到ESLint配置的"扩展"属性时,test-lint/foobar.js 必须失败。

    最后,你需要在几个地方提及插件:

    • "foobar.js" 添加到 package.json 中的"文件"字段。
    • 将eslint-plugin-foobar添加到 package.json 中的"devDependencies"字段。
    • 确保eslint-plugin-foobar中至少有一个规则使用 .eslintrc.base.js
    • 将它添加到支持的插件列表,到示例配置和 README.md 中的有效部分。

    完成后,运行 npm test 以验证是否已经正确完成。 它运行其他几个npm脚本:

    • "test:lint" 确保 test-lint/ 中的文件在使用eslint-config-prettier的排除时传递 ESLint。 它还提供了代码本身的代码。
    • "test:lint-verify-fail" 通过 test/lint-verify-fail.js 中的测试运行。
    • "test:lint-rules" 通过 test/rules.js 中的测试运行。
    • "test:ava" 运行单元测试来检查许多事情:
      • 上面所示的所有地方都提到了 eslint-plugin-foobar。
      • 没有任何未知的规则被关闭。 这有助于捕捉错误,例如。
      • CLI的工作原理。
    • "test:cli-sanity" 是对CLI的健全检查。

    许可证


    PRE  turn  RULE  规则  冲突  
    相关文章