前言

这篇文档我们来配置 eslint，创建项目文件、目录架构

开发

一、配置eslint

配置eslint我需要安装一些依赖包：

npm install -D eslint eslint-loader eslint-plugin-react babel-eslint复制代码

修改webpack.config.js文件

{    test:/\.(js|jsx)$/,    use:["babel-loader", "eslint-loader"],    exclude:/node_modules/}复制代码

创建.eslintrc.js 文件

module.exports = {    "env": {        "browser": true,        "commonjs": true,        "es6": true    },    "extends":[        "eslint:recommended",        'plugin:react/recommended',    ],    "parser": 'babel-eslint',    "parserOptions": {        "ecmaFeatures": {            "experimentalObjectRestSpread": true,            "jsx": true        },        "sourceType": "module"    },    "plugins": [        "react"    ],    "rules": {        "indent": [            "error",            4        ],        "linebreak-style": [            "error",            "windows"        ],        "quotes": [            "error",            "single"        ],        "semi": [            "error",            "never"        ],        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,        'no-console': 0    }};复制代码

当然，也可以使用eslint --init来创建

> eslint --init? How would you like to configure ESLint? Answer questions about your style? Are you using ECMAScript 6 features? Yes? Are you using ES6 modules? Yes? Where will your code run? Browser? Do you use CommonJS? Yes? Do you use JSX? Yes? Do you use React? Yes? What style of indentation do you use? Spaces? What quotes do you use for strings? Single? What line endings do you use? Windows? Do you require semicolons? No? What format do you want your config file to be in? JavaScript复制代码

eslint 的配置规则有很多，可以按照自己喜欢的方式来，网上也有很多很好的规则，这里就不一一介绍了。

二、完善项目文件、目录结构

先来看下我们上一篇时创建的简单目录结构

├── src                     │   ├── index.html                │   └── index.js                              ├── .gitignore├── package-lock.json├── package.json└── webpack.config.js复制代码

很简单，实际项目中的结构不会这么简单，让我总体看下实际的目录结构吧

├── mock                            # 本地模拟数据├── public├── src|   ├── assets                      # 本地静态资源│   ├── common                      # 应用公用配置，如导航信息│   ├── components                  # 项目通用通用组件│   ├── routes                      # 业务页面入口和常用模板│   ├── utils                       # 工具库│   ├── index.html                  # HTML 入口模板│   ├── index.js                    # 应用入口│   ├── index.less                  # 全局样式│   └── router.js                   # 路由入口├── tests                           # 测试工具├── .babelrc├── .eslintrc.js├── .gitignore├── package-lock.json├── package.json└── webpack.config.js复制代码

我的目录结构大概就是这样，可能会有差别哦~

好，下面让我们创建一些代码,在routes文件夹下创建一个Home.jsx

import React, {PureComponent} from 'react'export default class Home extends PureComponent{    render(){        return (            
    
     Hello World!
    
        )    }}复制代码

router.js里

import React from 'react'import {Route,HashRouter} from 'react-router-dom'import Home from './routes/Home.jsx'const RouterConfig = ()=>{    return (        
                
             
     
        )}export default RouterConfig复制代码

index.js里

import React from 'react'import ReactDOM from 'react-dom'import Router from './router'ReactDOM.render(    
    ,    document.getElementById('root'))复制代码

然后我们 npm start下，又是和Hello World相见的时候了。

总结

本篇主要讲了2点

1. 配置eslint
2. 项目目录结构

下篇我们来介绍实现mock本地数据模拟接口

系列文章