コーディング中は eslint を使用していませんでした。今インストールしたところ、エディターに prettier/prettier エラーが大量に表示されてしまいました。これではコードがきれいになるような気がしません。この問題を解決する方法を探しています。
prettierrc.js:
module.exports = {
bracketSpacing: true,
jsxBracketSameLine: false,
singleQuote: true,
trailingComma: 'all',
};
eslintrc.js:
module.exports = {
root: true,
extends: '@react-native-community',
};
最後に、サンプルコードをいくつか示します。
import React, {Component} from 'react';
import {View, Text, Picker} from 'react-native';
import {connect} from 'react-redux';
import {employeeUpdate} from '../actions';
import {CardSection, Input} from './common';
class EmployeeForm extends Component {
render(){
return (
<View>
<CardSection>
<Input
label="Name"
placeholder="Marco"
value={this.props.name}
onChangeText={value => this.props.employeeUpdate({prop: 'name', value})}
/>
</CardSection>
<CardSection>
<Input
label="Phone"
placeholder="555-5555"
value={this.props.phone}
onChangeText={value => this.props.employeeUpdate({prop: 'phone', value })}
/>
</CardSection>
<CardSection style={{ flexDirection: 'row'}}>
<Text style={styles.pickerTextStyle}>Shift</Text>
<Picker
style={{flex: 1}}
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeUpdate({prop: 'shift', value})}
>
<Picker.Item label="Monday" value="Monday" />
<Picker.Item label="Tuesday" value="Tuesday"/>
<Picker.Item label="Wednesday" value="Wednesday"/>
<Picker.Item label="Thursday" value="Thursday"/>
<Picker.Item label="Friday" value="Friday"/>
<Picker.Item label="Saturday" value="Saturday"/>
<Picker.Item label="Sunday" value="Sunday"/>
</Picker>
</CardSection>
</View>
);
}
}
何千もの赤い点が表示されてコードを「きれいに」しようとするのは煩わしいので、単にエラーを削除しようとしているのですが、それは達成されていません。
ベストアンサー1
ファイルのリンティングを無効にする代わりに、eslintrc.js 設定ファイル:
module.exports = {
root: true,
extends: '@react-native-community',
rules: {
'prettier/prettier': 0,
},
};