react-native 配置eslint+prettier（webstrom）

1. eslint、prettier

• eslint
  ESLint是一个语法规则和代码风格的检查工具,提高代码质量。
• prettier
  Prettier的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

eslint 和 prettier 可以配合使用，也可以单独使用。下面我们主要讲eslint和prettier结合使用。

2. dev依赖及说明

"devDependencies": {
    ...
    "babel-eslint": "^10.0.1",
    "eslint": "^5.12.1",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-flowtype": "^3.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-native": "^3.6.0",
    "prettier": "^1.16.1",
  },

• babel-eslint
  对所有有效的babel代码进行lint处理。如果你使用eslint本身不支持的特性，可以使用 babel-eslint。否则可以使用默认解析器而不需要使用babel-eslint。
• eslint-plugin-prettier
  配合eslint检测代码风格
  eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
  接下来，我们需要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。

//.eslintrc.js
{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• eslint-config-prettier
  通过使用eslint-config-prettier配置，能够关闭eslint一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

//.eslintrc.js
{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ],
}

同时使用eslint-plugin-prettier 和eslint-config-prettier两项配置：

//.eslintrc.js
{
  "extends": ["plugin:prettier/recommended"]
}

3. 配置eslint

3.1 安装相关依赖

首先我们需要安装相关依赖，将<2.dev依赖及说明>中的依赖添加到package.json的devDependencies下，并执行yarn。

node版本要求：之前安装的是8.4 版本过低，导致eslint添加失败。

3.2 添加规则文件

文件名.eslintrc.js，文件位置在项目根目录下。

//.eslintrc.js
module.exports = {
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    "parser": "babel-eslint",
    // 此项指定环境的全局变量，
    "env": {
        "es6": true,
        "node": true,
        "react-native/react-native": true,
    },
    // 脚本在执行期间访问的额外的全局变量
    // 当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
    "globals": {
        "px2dp": true,
        "FONT_SIZE": true,
        "SCREEN_WIDTH": true,
        "SCREEN_HEIGHT": true,
        "IOS": true,
        "Android": true,
        "Toast": true,
        "isIPhoneX": true,
    },
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:flowtype/recommended",
        "plugin:prettier/recommended",
    ],
    // 设置解析器选项（必须设置这个属性）
    "parserOptions": {
        // 想使用的额外的语言特性:
        "ecmaFeatures": {
            // http://es6.ruanyifeng.com/#docs/object#对象的扩展运算符
            "experimentalObjectRestSpread": true,
            // 启用 JSX
            "jsx": true
        },
        //设置"script"（默认）或"module"如果你的代码是在ECMAScript中的模块
        "sourceType": "module"
    },
    // 此项是用来提供插件的，插件名称省略了eslint-plugin-，
    "plugins": [
        "react",
        "react-native",
        "flowtype"
    ],
    /**
     * "off" 或 0 - 关闭规则
     * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
     * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
     */
    "rules": {
        ////////////////
        // 可能的错误 //
        ////////////////

        // 禁止不必要的布尔转换
        "no-extra-boolean-cast": 0,
        "no-useless-computed-key": 0,
        // 禁止不必要的括号 //(a * b) + c;//报错
        "no-extra-parens":0,
        // 禁止不必要的分号
        "no-extra-semi":2,
        // 禁止在字符串和注释之外不规则的空白
        "no-irregular-whitespace":2,
        // 禁止出现令人困惑的多行表达式
        "no-unexpected-multiline":2,
        // 禁止在return、throw、continue 和 break语句之后出现不可达代码
        /*
         function foo() {
         return true;
         console.log("done");
         }//错误
         */
        "no-unreachable":2,
        // 强制 typeof 表达式与有效的字符串进行比较
        // typeof foo === "undefimed" 错误
        "valid-typeof":2,


        //////////////
        // 最佳实践 //
        //////////////

        // 启用严格模式
        'strict': 'error',
        // 空格方式,使用tab

        // 强制使用一致的换行风格
        "linebreak-style": [
            "error",
            "unix"
        ],
        // 允许使用 单引号和es6的``
        "quotes": [
            "error",
            "single",
            { "allowTemplateLiterals": true }
        ],
        // 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
        "semi": [
            "error",
            "always"
        ],
        // 尽可能使用`===`
        "eqeqeq": 2,
        // 强制在代码块中开括号前和闭括号后有空格
        "block-spacing": [2, "always"],
        // 在代码块之前强制使用空格
        "space-before-blocks": 2,
        // 要求操作符周围有空格
        "space-infix-ops": 2,
        // 一元操作符必须要有空格
        "space-unary-ops": 2,
        // 强制在注释中 // 或 /* 使用一致的空格
        "spaced-comment": [2, "always", { exceptions: ["-"] }],
        // 强制关键字周围空格的一致性
        "keyword-spacing": [
            2,
            { "before": true, "after": true }
        ],
        // 强制在箭头函数中 "xxx() => {}"
        "arrow-spacing": [
            "error",
            { "before": true, "after": true }
        ],
        // 在冒号后要加上空格
        "key-spacing":[
            "error",
            { "beforeColon": false }
        ],
        // 禁止空格和 tab 的混合缩进
        "no-mixed-spaces-and-tabs": 0,
        // 不允许使用var
        "no-var": 2,
        // 要求在逗号后使用一个或多个空格
        "comma-spacing": [
            "error",
            { "after": true }
        ],
        // 禁止分号前后有空格
        "semi-spacing": 2,
        // 禁止分号之前出现空格
        "semi-spacing": ["error", {"before": false, "after": true}],
        // 不允许改变用const声明的变量
        'no-const-assign': 'error',
        // 如果一个变量不会被重新赋值，最好使用const进行声明。
        'prefer-const': 'error',



        // 不允许使用行内样式
        "react-native/no-inline-styles": 2,
        // 强制类型后面要有一个","
        "flowtype/delimiter-dangle": [
            2,
            "only-multiline"
        ],
        // 在 : 后强制加空格
        "flowtype/space-after-type-colon": [
            2,
            "always"
        ],
        // 在 | & 符号中,强制加空格
        "flowtype/union-intersection-spacing": [
            2,
            "always"
        ],

    }
};

3.3 开启并配置eslint

image.png

4. prettier配置

4.1 安装prettier依赖

  yarn add perttier -D

4.2 安装prettier的webstorm插件

webstrom版本>2018，测试过程中发现2017版Plugins中找不到Prettier。2018版默认已安装prettier插件。

image.png

4.3 配置prettier插件

image.png

4.4 开启代码保存时自动格式化(可选)

image.png

image.png

4.5 添加prettier配置规则

在项目根目录package.json中添加，或在根目录下添加.prettierrc.js文件。

//.prettierrc.js
module.exports = {
    "tabWidth": 4,                   //一个tab代表几个空格数，默认为80
    "useTabs": false,                //是否使用tab进行缩进，默认为false，表示用空格进行缩减
    "singleQuote": true,             // //字符串是否使用单引号，默认为false，使用双引号
    "printWidth": 120,               // 换行字符串阈值
    "semi": true,                    // 句末加分号,默认为true
    "trailingComma": 'none',         //是否使用尾逗号，有三个可选值"<none|es5|all>"
    "bracketSpacing": true,          //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    "jsxBracketSameLine": false,     // jsx > 是否另起一行
    "arrowParens": 'avoid',          // (x) => {} 是否要有小括号
    "requirePragma": false,          // 是否要注释来决定是否格式化代码
    "proseWrap": 'preserve'          // 是否要换行
    "parser": "babylon"              //代码的解析引擎，默认为babylon，与babel相同。
}

还有一些其他配置可以在官方文档进行查阅。

目前rn项目中使用的配置：

//package.json
"prettier": {
    "requirePragma": true,
    "singleQuote": true,
    "printWidth": 115,
    "proseWrap": "always"
  }

配置好后代码最上面加格式化注释即可

image.png

参考文章：
https://blog.csdn.net/github_33420275/article/details/83623890
https://segmentfault.com/a/1190000015315545