vscode中 React/ReactNative 配置esli

在VSCode中添加ESLint和Prettier

打开VSCode在顶部菜单栏选择查看-->扩展或直接点击扩展选项卡搜索并安装eslint和Prettier,如下截图所示

eslint
prettier

配置ESLint和Prettier

运行终端输入以下命令

第1步： 进入项目目录

cd <project>

第2步： 安装Airbnb eslint所需要的包

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y 
or 
yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint -plugin-JSX-A11Y

第3步： 安装eslint包

npm install --save-dev eslint babel-eslint 
or
yarn add -D eslint babel-eslint

然后

eslint --init

1. Which style guide do you want to follow?
   Airbnb
2. What format do you want your config file to be in?
   JavaScript

第4步：安装prettier配置包 //解决和eslint冲突

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier 
or 
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

第5步：
在项目文件夹中找到 .eslintrc.js文件
将以下内容粘贴替换之前内容

module.exports = {
  extends: ['airbnb', 'prettier'],
  plugins: ['prettier'],
  parser: 'babel-eslint',
  env: {
    browser: true,
    es6: true
  },
  rules: {
    'prettier/prettier': 0,
    'no-unused-vars': ['error', { vars: 'local' }],
    'no-nested-ternary': 0,
    'react/no-array-index-key': 0,
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
    'no-param-reassign': 0
  }
};

第6步：配置VSCode保存格式代码
在VSCode首选项 - >设置 - >用户设置中单击右上角的3个点并选择“打开settings.json”这将打开设置JSON，找到以下值并进行相同修改。修改后的值将显示在右侧。设置以下内容

{ 
  "prettier.eslintIntegration": true,  //设置prettier优先ESlint
  "editor.formatOnSave": true //在保存后用prettier格式代码
}