如何格式化原子中原生反應代碼

我正在致力於react-native應用程序。我正在使用文本編輯器來開發react-native應用程序。如何格式化原子中原生反應代碼

我沒有找到任何格式化react-native代碼的快捷方式。我嘗試美化包https://atom.io/packages/atom-beautify，但它不工作。

import React, { 
    Component 
} from 'react'; 
import { 
    AppRegistry, 
    Image, 
    View, 
    Text, 
    Button, 
    StyleSheet 
} from 'react-native'; 

class SplashScreen extends Component { 
    render() { 
     return (< 
      View style = { 
       styles.container 
      } > 
      < 
      Image source = { 
       require('./img/talk_people.png') 
      } 
      style = { 
       { 
        width: 300, 
        height: 300 
       } 
      } 
      /> < 
      Text style = { 
       { 
        fontSize: 22, 
        textAlign: 'center', 
        marginTop: 30 
       } 
      } > Never forget to stay in touch with the people that matter to you. < /Text> < 
      View style = { 
       { 
        marginTop: 30 
       } 
      } > < Button title = "CONTINUE" 
      color = "#FE434C"/> < /View> < 
      /View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     backgroundColor: '#FFFFFF', 
     margin: 50, 
     alignItems: 'center', 
     flex: 1, 
     flexDirection: 'column' 
    } 
}) 

AppRegistry.registerComponent('Scheduled',() => SplashScreen);

來源

2017-04-14 N Sharma

此刻，atom-beautify不支持JSX。查看問題[支持JSX語法（ReactJS）]（https://github.com/Glavin001/atom-beautify/issues/144）。你可以使用[atom-react]（https://orktes.github.io/atom-react/#indentation）包。 – Tushar

@Tushar任何其他包？ –

可能重複[如何配置atom-beautify包以使用babel/jsx javascript文件進行格式化？]（// stackoverflow.com/q/37232310） – Tushar

我強烈推薦prettier-atom。

Prettier最近得到了很多關注，並有一個很好的理由。

這是一個非常直截了當的，自以爲是的JavaScript格式化程序，它提供了一些適合自己風格的選項。如果您需要更多控制，它還附帶可選的ESLint集成。

來源

2017-04-14 10:58:28 designorant

謝謝。有效！！ –

如何格式化原子中原生反應代碼

回答

相關問題