ESLint和Prettier导入【React Native & TypeScript】

本篇文章是在使用vscode开发react-native和使用typescript作为开发语言的前提下写的。

eslint 是javascript的静态代码分析工具：

 它用于查找代码中的错误并统一样式，例如如何使用括号和空格。通过引入 ESLint，修正部分的位置变得清晰，从而减少开发时间。

①　在命令提示符或 PowerShell 中，移动到要安装 ESlint 的项目文件夹。

②　执行下面的命令

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @react-native-community/eslint-config eslint-plugin-jest

 ③　打开.eslintrc.js、追加下面的内容。

module.exports = {
  root: true,
  extends: ['@react-native-community', 'prettier', 'prettier/@typescript-eslint'],
};

 VSCode中安装eslint插件：

安装之后点击齿轮图标，再点击open settings（右上角）并且添加下面的内容

{
  "eslint.validate":[
    "typescript",
    "typescriptreact"
  ]
}

 导入Prettier

 执行下面的命令

npm install --save-dev prettier

 在.prettierrc.js中添加

module.exports = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  endOfLine: 'lf',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  printWidth: 120,
  quoteProps: 'as-needed',
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  useTabs: false,
};

在安装prettier插件，并且从工具栏view->command palette->open workspace settings (JSON) 按回车之后写入下面的内容

{
   "editor.formatOnSave": true
}

 如果不起作用重启vscode。

以上就完成了eslint 和 prettier的开发配置。