ff-stream-web

git clone git://archive.git.mtrnord.blog/MTRNord/ff-stream-web.git
Log | Files | Refs | README | LICENSE

how-to-configure-text-editors.md (3132B)

      1 ## How to Configure Text Editors and IDEs for React.js [![img](https://img.shields.io/badge/discussion-join-green.svg?style=flat-square)](https://github.com/kriasoft/react-starter-kit/issues/117)
      2 
      3 > Tips and tricks on how to configure your favorite text editor or IDE to work
      4 > with React.js/ES6+/JSX.
      5 
      6 ### WebStorm
      7 
      8 Create a new project based on **React Starter Kit template**
      9 
     10 ![react-project-template-in-webstorm](https://dl.dropboxusercontent.com/u/16006521/react-starter-kit/webstorm-new-project.png)
     11 
     12 Make sure that **JSX** support is enabled in your project. This is set by default, if you create a new project based on React.js template.
     13 
     14 ![jsx-support-in-webstorm](https://dl.dropboxusercontent.com/u/16006521/react-starter-kit/webstorm-jsx.png)
     15 
     16 Configure JavaScript libraries for **auto-complete**
     17 
     18 ![javascript-libraries-in-webstorm](https://dl.dropboxusercontent.com/u/16006521/react-starter-kit/webstorm-libraries.png)
     19 
     20 Enable **ESLint** support
     21 
     22 ![eslint-support-in-webstorm](https://dl.dropboxusercontent.com/u/16006521/react-starter-kit/webstorm-eslint.png)
     23 
     24 Enable **CSSComb** by following the instructions [here](https://github.com/csscomb/jetbrains-csscomb).
     25 
     26 **If you have trouble with autoreloading** try to disable "safe write" in `File > Settings > System Settings > Use "safe write" (save changes to a temporary file first)`
     27 
     28 ### Atom
     29 
     30 Install atom packages
     31 
     32 * [linter](https://atom.io/packages/linter)
     33 * [linter-eslint](https://atom.io/packages/linter-eslint)
     34 * [linter-stylelint](https://atom.io/packages/linter-stylelint)
     35 * [react](https://atom.io/packages/react)
     36 
     37 ```shell
     38 apm install linter linter-eslint react linter-stylelint
     39 ```
     40 
     41 Install local npm packages
     42 
     43 * [eslint](https://www.npmjs.com/package/eslint)
     44 * [babel-eslint](https://www.npmjs.com/package/babel-eslint)
     45 * [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)
     46 * [stylelint](https://www.npmjs.com/package/stylelint)
     47 
     48 ```shell
     49 yarn add --dev eslint babel-eslint eslint-plugin-react stylelint
     50 ```
     51 
     52 *You may need to restart atom for changes to take effect*
     53 
     54 ### SublimeText
     55 
     56 Install SublimeText packages  
     57 Easiest with [Package Control](https://packagecontrol.io/) and then "Package Control: Install Package" (Ctrl+Shift+P)  
     58 
     59 * [Babel](https://packagecontrol.io/packages/Babel)
     60 * [Sublime-linter](http://www.sublimelinter.com/en/latest/)
     61 * [SublimeLinter-contrib-eslint](https://packagecontrol.io/packages/SublimeLinter-contrib-eslint)
     62 * [SublimeLinter-contrib-stylelint](https://packagecontrol.io/packages/SublimeLinter-contrib-stylelint)
     63 
     64 You can also use [SublimeLinter-contrib-eslint_d](https://packagecontrol.io/packages/SublimeLinter-contrib-eslint_d) for faster linting.
     65 
     66 Set Babel as default syntax for a particular extension:
     67 
     68 * Open a file with that extension,
     69 * Select `View` from the menu,
     70 * Then `Syntax` `->` `Open all with current extension as...` `->` `Babel` `->` `JavaScript (Babel)`.
     71 * Repeat this for each extension (e.g.: .js and .jsx).
     72 
     73 Install local npm packages
     74 
     75 ```
     76 yarn add --dev eslint@latest
     77 yarn add --dev babel-eslint@latest
     78 yarn add --dev eslint-plugin-react
     79 yarn add --dev stylelint
     80 ```