come aggiungere react jsx come tipo di file javascript in vim e abilitare eslinting, completamento automatico?

Question

Ho recentemente iniziato a utilizzare vim.Voglio configurare file con estensione .jsx da trattare come file di script java .js in Vim. Inoltre voglio abilitare es-linting, snippet con i miei file .jsx. Ho installato seguenti pacchetti nel mio sistema

npm install -g eslint 
npm install -g babel-eslint 
npm install -g eslint-plugin-react 

Inoltre ho installato Bundle 'mxw/vim-jsx' per sostenere JSX in vim.

aggiunto anche seguenti righe nel mio file .vimrc

let g:syntastic_javascript_checkers = ['eslint'] 
let g:jsx_ext_required = 0 

Modifica Trovato questo plugin vim per reagire frammenti: Vim-react-snippets

Answer 1

ho deciso di scrivere questo tutorial per l'installazione vim per reagiscono sviluppo in profondità in modo che i principianti lo trovano utile quando iniziano con Vim e reagiscono.

evidenziazione della sintassi

Per ottenere la sintassi JSX evidenziazione di guardare a destra in vim, utilizzare mxw's Vim JSX plugin.

procedura per installare MXW/vim-JSX Plugin

Se si utilizza Vundle,

---

aggiuntivi seguenti righe nel tuo .vimrc:

Plugin 'mxw/vim-jsx' 
Plugin 'pangloss/vim-javascript' 

Questo plugin dipende pangloss/vim-javascript quindi è necessario installare Anche quello.

Per installare da dentro Vim, utilizzare i comandi seguenti.

:so ~/.vimrc 

Per sorgente modificato .vimrc file di configurazione e utilizzare, la prossima

:PluginInstall 

Se si utilizza patogeno

---

cd ~/.vim/bundle 
git clone https://github.com/mxw/vim-jsx.git 

Abilita JSX Sintassi highlighing nel file JavaScript

Aggiungi le seguenti linee nel tuo. vimrc:

let g:jsx_ext_required = 0 

Abilitazione eslint in vim

È necessario installare seguenti pacchetti aiutante NPM insieme con le ultime eslint (usato 2.11.1 al momento della scrittura). Assicurarsi inoltre di avere node.js versione 4 o superiore installato nel sistema.

babel-eslint - Per sostenere ES6 linting

eslint-plugin-reagiscono - Reagire regole linting specifiche per ESLint ad esempio impedire l'uso di setState in componentDidMount

npm install --save-dev eslint 
npm install --save-dev babel-eslint 
npm install --save-dev eslint-plugin-react 

ho deciso di utilizzare le pratiche e le convenzioni comuni utilizzate da AirBnB, quindi ho installato anche i seguenti pacchetti. Ma non ne hai bisogno Se non vuoi usare i preset di eslint di AirBnB.

npm install --save-dev eslint-config-airbnb 
npm install --save-dev eslint-plugin-import 
npm install --save-dev eslint-plugin-jsx-a11y 

---

Creare un file di configurazione .eslintrc.json nella radice del progetto: (È possibile utilizzare eslint per generare file di configurazione eslint in modo intreactive)

eslint --init 

(Se scegli eventuali preimpostazioni assicurati di installare anche il pacchetto richiesto per quel preset di lanugine)

Ho esteso "airbnb" ma ho annullato ed alcune regole per il mio progetto. È possibile utilizzare "si estende": "eslint: consigliato" per abilitare una regola pelucchi comune consigliato da eslint Ecco il mio .eslintrc.json file di

{ 
    "extends"  : "airbnb", 
    "parser"  : "babel-eslint", 
    "parserOptions" : { 
     "ecmaVersion" : 6, 
     "sourceType" : "module", 
     "ecmaFeatures" : { 
      "jsx":true 
     } 
    }, 
    "env": { 
     "browser" : true, 
     "node" : true, 
     "jquery" : true 
    }, 
    "settings":{ 
     "react":{ 
      "pragma":"React", 
      "version":"15.1.0" 
     }, 
     "ecmascript":6, 
     "jsx":true 
    }, 
    "plugins": [ 
     "react" 
    ], 
    "rules": { 
     "strict": 0, 
     "quotes": 0, 
     "no-unused-vars": 1, 
     "camelcase": 1, 
     "no-underscore-dangle": 1, 
     "comma-dangle":[1,"never"], 
     "indent":["error",4], 
     "react/jsx-indent":0, 
     "react/jsx-equals-spacing": [2, "always"], 
     "no-console":0, 
     "max-len":1, 
     "no-param-reassign":1, 
     "key-spacing": [ 
       2, 
       { 
       "align": "colon", 
       "beforeColon": true, 
       "afterColon": true 
       } 
     ], 
     "no-multi-spaces": [ 
       2, 
       { 
       "exceptions":{ 
        "VariableDeclarator":true, 
        "ImportDeclaration":true, 
        "JSXAttribute":true, 
        "AssignmentExpression":true 
       } 
       } 
     ] 
    } 
} 

---

Ora integrare ESLint con Syntastic Plugin in Vim Ho deciso di utilizzare Syntastic con vim per il controllo degli errori di sintassi.

let g:syntastic_javascript_checkers = ['eslint'] 

tutto pronto ma ancora non v'è una questione in sospeso con Syntastic. Ricerca sintattica globale node_moduli anziché progetto locale.

Una soluzione installerà tutti i pacchetti eslint, babel-eslint, ecc. A livello globale, che sicuramente non sarà una buona pratica.

Un'altra soluzione è

definire uno script NPM nel vostro package.json

"eslint": "eslint -c .eslintrc.json" 

Si aggiungerà tutti i pacchetti NPM installati localmente nel percorso corrente, in modo da sarà disponibile per l'esecuzione.

E nel file .vimrc aggiungere

let g:syntastic_javascript_eslint_exe = 'npm run eslint --' 

Qui stiamo invocando linting tramite script NPM da vim.

Alternativa: uso Plug 'mtscout6/syntastic-local-eslint.vim' plug

finestra di errore Open in vim come si apre il file -

Add seguenti linee al proprio Vimrc per mostrare l'errore lint corrente (nel caso in cui ce ne sono), come si apre il file per la modifica

let g:syntastic_always_populate_loc_list = 1 
let g:syntastic_auto_loc_list = 1 
let g:syntastic_check_on_open = 1 
let g:syntastic_check_on_wq = 0 

Snipptes e il completamento automatico

Ci sono diverse forcelle di motori frammento che consentono all'utente di inserire frammenti digitando il nome di un frammento che colpisce la mappatura di espansione.

• github.com/SirVer/ultisnips: python, supporta tutti i frammenti in questo repo.
• github.com/garbas/vim-snipmate: VimL, ​​snipmate-snippet, il motore a volte si comporta in modo strano. Supporta gli snippet/*
• github.com/Shougo/neosnippet: VimL, ​​supporta frammenti/* con qualche configurazione.
• github.com/drmingdrmer/xptemplate: sintassi completamente diversa, non legge frammenti contenuti in questo file, ma è anche molto potente.

Preferisco neosnippet. Installalo in Vim, per abilitare gli snippet con neocomplete per il completamento automatico.

Neocomplete è un incredibile plug-in di completamento automatico con supporto aggiuntivo per i frammenti.Può completare simulatamente dal dizionario, dal buffer, dall'omnicompleto e dagli snippet. Questo è l'unico vero plugin che porta il completamento automatico di Vim alla pari con i migliori editor.

Vedi istruzioni per l'installazione here for neocomplete

Dopo aver installato sopra plugin è necessario installare un altro plugin per consentire di reagire frammenti specifici

Bundle 'justinj/vim-react-snippets' 

vedere Installazione istruzioni here per questo plugin.

Se tutte le impostazioni sono state eseguite correttamente, è stato abilitato vim con eslinting, completamento automatico, hightlighting della sintassi JSX per React, con funzionalità ES6!

Preso dal mio post blog.

Answer 2

quel plugin è stato installato già sets il tipo di file di file da .jsxjavascript.jsx quindi i file devono essere trattati come come se il loro tipo di file fosse javascriptplus qualsiasi funzione correlata a jsx fornita da tale plug-in.

Non ho idea di come configurare Syntastic per jsx, ma è possibile ottenere lo sfilacciamento senza installando un plug-in così grande. Per questo è necessario aggiungere le righe qui sotto per after/ftplugin/jsx.vim a dire a Vim per eseguire automaticamente eslint dopo una scrittura:

" see :help 'errorformat' 
setlocal errorformat=%E%f:\ line\ %l\\,\ col\ %c\\,\ Error\ -\ %m,%-G%.%#,%W%f:\ line\ %l\\,\ col\ %c\\,\ Warning\ -\ %m,%-G%.%# 

" see :help 'makeprg' and $ eslint --help 
setlocal makeprg=eslint\ -f\ compact 

" run :make % on write 
autocmd! BufWritePost <buffer> silent make % | silent redraw!