6

Say I have a function like this in a .js file:

import React, { Component, PropTypes } from 'react';
const Forecast = ({ summary, details }) => {
  if (!summary) return <div/>;

  const image = `http://openweathermap.org/img/w/${summary.get('icon')}.png`;

  return (
    <div className="col-lg-3 col-md-4 col-xs-6 thumb">
      <div className="thumbnail">
        <div className="weather">
          <img src={image}/>
        </div>
        <div className="caption">
          <h3>{summary.get('outlook')}</h3>
          <p>{summary.get('date').format('DD/MM/YYYY')}</p>
        </div>
      </div>
    </div>
  );
};

export default Forecast;

And I highlight the jsx code and format, this is the result:

import React, { Component, PropTypes } from 'react';

const Forecast = ({ summary, details }) => {
  if (!summary) return <div/>;

  const image = `http://openweathermap.org/img/w/${summary.get('icon')}.png`;

  return (
    <div className="col-lg-3 col-md-4 col-xs-6 thumb">
    <div className="thumbnail">
    <div className="weather">
    <img src={image}/>
    </div>
    <div className="caption">
    <h3>{summary.get('outlook')}</h3>
    <p>{summary.get('date').format('DD/MM/YYYY')}</p>
    </div>
    </div>
    </div>
  );
};

export default Forecast;

Is it possible to configure web-mode to format the jsx with correct indentation?

6

The answer was to add the following to my init.el

(setq web-mode-content-types-alist
  '(("jsx" . "\\.js[x]?\\'")))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.