将 eslint-config-react-app 集成到现有项目中
integrating eslint-config-react-app to existing project
我尝试在现有项目中使用 eslint-config-react-app。我从字面上复制了 githubpage 中的 npm install 命令:
npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-react@6.4.1
然后在项目的根目录下创建 .eslint
文件:
{
"extends": "react-app"
}
然后我启动 webpack-dev-server 但我没有收到关于未使用的函数或变量的警告 - 什么都没有。
package.json - 我用来启动应用程序的命令:
"scripts": {
"dev": "webpack-dev-server --config webpack/dev.config.js --hot --inline --progress --colors --history-api-fallback --host 0.0.0.0 --port 8080"
},
dev.config.js 放在项目的webpack
子目录下:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
context: path.resolve(__dirname, '..'),
entry: [
'babel-polyfill',
'./src/client.js'
],
output: {
path: './public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['transform-runtime', 'transform-class-properties', 'transform-decorators-legacy'],
presets: ['es2015', 'react', 'stage-0']
}
},
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: "file"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=image/svg+xml"
},
]
},
resolve: {
modules: [
path.join(__dirname, 'src'),
'node_modules'
],
alias: {
components: path.resolve(__dirname, '../src/components'),
layouts: path.resolve(__dirname, '../src/layouts'),
pages: path.resolve(__dirname, '../src/pages'),
api: path.resolve(__dirname, '../src/api'),
},
extensions: ['.js', '.jsx']
},
devtool: 'inline-source-map',
plugins: [
new ExtractTextPlugin({
filename: 'style.css',
allChunks: true
}),
new CopyWebpackPlugin([
{from: './static', to: './public/static'}
])
]
};
弹出后我查看了 create-react-app
配置,我所做的是:
1: npm install --save-dev eslint-loader
2:将此添加到 package.json
:
"eslintConfig": {
"extends": "react-app"
}
3: 添加加载程序到 dev.config.js
:
{
test: /\.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: 'eslint-loader'
},
- 不需要
.eslintrc
文件
我尝试在现有项目中使用 eslint-config-react-app。我从字面上复制了 githubpage 中的 npm install 命令:
npm install --save-dev eslint-config-react-app babel-eslint@7.1.1 eslint@3.16.1 eslint-plugin-flowtype@2.21.0 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-react@6.4.1
然后在项目的根目录下创建 .eslint
文件:
{
"extends": "react-app"
}
然后我启动 webpack-dev-server 但我没有收到关于未使用的函数或变量的警告 - 什么都没有。
package.json - 我用来启动应用程序的命令:
"scripts": {
"dev": "webpack-dev-server --config webpack/dev.config.js --hot --inline --progress --colors --history-api-fallback --host 0.0.0.0 --port 8080"
},
dev.config.js 放在项目的webpack
子目录下:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
context: path.resolve(__dirname, '..'),
entry: [
'babel-polyfill',
'./src/client.js'
],
output: {
path: './public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['transform-runtime', 'transform-class-properties', 'transform-decorators-legacy'],
presets: ['es2015', 'react', 'stage-0']
}
},
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: "file"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: "url?limit=10000&mimetype=image/svg+xml"
},
]
},
resolve: {
modules: [
path.join(__dirname, 'src'),
'node_modules'
],
alias: {
components: path.resolve(__dirname, '../src/components'),
layouts: path.resolve(__dirname, '../src/layouts'),
pages: path.resolve(__dirname, '../src/pages'),
api: path.resolve(__dirname, '../src/api'),
},
extensions: ['.js', '.jsx']
},
devtool: 'inline-source-map',
plugins: [
new ExtractTextPlugin({
filename: 'style.css',
allChunks: true
}),
new CopyWebpackPlugin([
{from: './static', to: './public/static'}
])
]
};
弹出后我查看了 create-react-app
配置,我所做的是:
1: npm install --save-dev eslint-loader
2:将此添加到 package.json
:
"eslintConfig": {
"extends": "react-app"
}
3: 添加加载程序到 dev.config.js
:
{
test: /\.(js|jsx)$/,
enforce: 'pre',
exclude: /node_modules/,
use: 'eslint-loader'
},
- 不需要
.eslintrc
文件