美文网首页
在 React 项目中配置 airbnb 规则的 eslint

在 React 项目中配置 airbnb 规则的 eslint

作者: Ginger12 | 来源:发表于2019-03-22 21:43 被阅读0次

    因为在每一个项目中都会使用到eslint的配置,所以这里我选择全局安装。

    1. 全局安装eslint

    npm install -g eslint 
    
    // 使用 airbnb 规则和 react 还需要的其他依赖
    npm install -g eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
    

    2. 创建eslint配置文件

    1. 在项目路径下执行命令 eslint --init。根据提示选择你的需要的设置。
    ? How would you like to use ESLint?
    To check syntax and find problems
    
    ? What type of modules does your project use?
    JavaScript modules (import/export)
    
    ? Which framework does your project use?
    React
    
    ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
    Browser
    
    ? What format do you want your config file to be in? 
    JSON
    
    1. 将配置文件中的 extends 改为 airbnb。如下:
    "extends": "airbnb",
    
    1. 将配置文件中的 parser 改为 babel-eslint。如下:
    "parser": "babel-eslint",
    

    3. WebStorm 配置

    1. 进入设置页面:Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint

    2. ESLint package 的路径设置为全局路径

      pic1
    3. Configuration file 路径设置为项目 eslint 配置文件的路径

      pic2

    4. VSCode 配置

    1. 下载 eslint 插件

      pic3
    2. 修改 setting.json
      在 setting.json 中添加如下配置:

    "eslint.alwaysShowStatus": true,
    
    // 添加 eslint 的全局路径
    "eslint.nodePath": "/Users/zhy/.nvm/versions/node/v10.14.1/lib/node_modules",
    
    // 保存时自动修复
    "eslint.autoFixOnSave": true
    

    保存配置后重启 vscode。

    1. 点击右下角的 eslint 即可查看问题详情


      pic4

    5. 格式问题自动修复

    1. 命令行
    // 指令格式
    eslint [options] file.js [file.js] [dir]
    
    // 修复指令
    eslint --fix file.js [file.js] [dir]
    
    // 示例
    eslint --fix src/pages/login/Login.jsx
    
    eslint --fix src/pages/login
    
    1. WebStorm
      右件点击文件或者文件夹


      pic5
    2. vs code


      pic6

    相关文章

      网友评论

          本文标题:在 React 项目中配置 airbnb 规则的 eslint

          本文链接:https://www.haomeiwen.com/subject/jkedvqtx.html