vscode中React-Native项目代码规范设置方法

写作时间：2020/4/17
React-Native版本：0.62
IDE：vscode

本文介绍如何在vscode中设置RN项目的代码规范，利用.eslintrc.js和.prettierrc.js两个文件对规范进行制定和修改

1 在VSCode中搜索ESLint并进行安装

2 将.eslintrc.js和.prettierrc.js两个文件替换掉原工程当中的文件

// .eslintrc.js
module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module',
        ecmaFeatures: {
            legacyDecorators: true,
        },
    },
    extends: '@react-native-community',
    rules: {
        'react-native/no-inline-styles': 0, //关闭内联样式警告
        'no-extend-native': [1, {'exceptions': ['Date', 'String']}],
        'no-control-regex': 0,  //允许正则表达式中的控制字符
    }
};

// .prettierrc.js
module.exports = {
    printWidth: 120, //一行的字符数，如果超过会进行换行，默认为80
    tabWidth: 4, //一个tab代表几个空格数
    bracketSpacing: false,  //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    jsxBracketSameLine: true,   //JSX 中最后一行的 > 符号不单独换行
    singleQuote: true,    //字符串是否使用单引号，默认为false，使用双引号
    trailingComma: 'all',   //是否使用尾逗号，有三个可选值"<none|es5|all>"
    endOfLine: 'auto',
};

3 打开设置，搜索eslint，设法找到settings.json文件并打开
4 在setting.json文件中输入以下代码：

{
 "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
 },
}

注：
1 第4步中的代码有可能随着版本更迭而进行变化，有时需要按照提示或版本要求进行修改
2 设置完成之后，重新打开需要整理格式的文件，当保存代码时(ctrl+s)，已有错误应当能够实现自动修复，但有些错误需要手动处理
3 设置文件中的内容可以根据需要自行修改