как добавить реагируют jsx как JavaScript тип файла в Vim и включить eslinting, авто доработок?

Я решил написать этот учебник, чтобы установка vim на реагировать развитие в глубину, так что новички находят это полезным, когда они начинают с vim и реагировать.

синтаксис

чтобы синтаксис JSX с высоким освещением выглядел правильно в vim, используйте Vim JSX mxw плагин.

шаги по установке плагина mxw/vim-jsx

если вы используете Vundle,

добавьте следующие строки в свой .vimrc:

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

этот плагин зависит от pangloss / vim-javascript поэтому вам также нужно установить это.

чтобы установить из vim, используйте приведенные ниже команды.

:so ~/.vimrc

источник изменен .vimrc файл конфигурации и использовать его в следующем

:PluginInstall

если вы используете возбудитель

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

включить Подсветка синтаксиса JSX в файлах javascript

добавить следующие строки в ваш .vimrc:

let g:jsx_ext_required = 0 

включение eslint в vim

вам необходимо установить следующие вспомогательные пакеты npm вместе с последними eslint ( используется 2.11.1 на момент написания ). Также убедитесь, что у вас есть узел.js версия 4 или выше установленных в система.

Вавилон-eslint - для поддержки ES6 linting

eslint-plugin-react - конкретные правила пылеобразования реагировать на ESLint e.g запретить использование setState в componentDidMount

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

Я решил использовать общие практики и соглашения, используемые сервис Airbnb, поэтому я также установил следующие пакеты. Но они тебе не нужны. Если вы не хотите использовать AirBnB eslint задает.

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

создать файл config .eslintrc.в JSON в корне вашего проекта: (Вы можете использовать eslint для создания файла конфигурации eslint в intreactive путь)

eslint --init

(если вы выбрали какие-либо пресеты, убедитесь, что вы также установите необходимый пакет для этого пресета lint)

я расширил "airbnb", но переопределил некоторые правила для моего проекта. Вы можете использовать "extends":"eslint: рекомендуется" включить некоторые общие правило Линта, рекомендованное eslint Вот мой .eslintrc.в JSON

{
    "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
                }
              }
        ]
    }
}

теперь интегрируйте ESLint с синтаксическим плагином в Vim Я решил использовать Syntastic с vim для проверки синтаксических ошибок.

let g:syntastic_javascript_checkers = ['eslint']

все установлено, но все же остается одна проблема с Syntastic. синтаксический поиск глобальных node_modules вместо локального проекта.

одним из решений будет установка всех пакетов eslint, babel-eslint и т. д. Во всем мире, что определенно не будет хорошей практикой.

другое решение -

определение npm script в своем пакета.в JSON

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

он добавит все локально установленные пакеты npm в текущем пути, поэтому они будут доступны для выполнения.

и в добавить

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

вот и мы вызов пылеобразования через НПМ скрипт из Vim.

альтернатива: использовать плагин ' mtscout6 / syntastic-local-eslint.ВИМ' плагин

открыть окно ошибки в vim при открытии файла -

добавьте следующие строки в свой .vimrc чтобы показать текущую ошибку lint (в случае необходимости), когда вы открываете файл для редактирования

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 и автодополнение

там различные вилки движков фрагментов, которые позволяют пользователю вставлять фрагменты, введя имя фрагмента, попавшего в отображение расширения.

• github.com/SirVer/ultisnips: python поддерживает все фрагменты в этом РЕПО.
• github.com/garbas/vim-snipmate: VimL, snipmate-фрагменты, двигатель иногда ведет себя странно. Поддержка фрагментов/*
• github.com/Shougo/neosnippet: VimL, поддерживает фрагменты / * с некоторыми конфигурация.
• github.com/drmingdrmer/xptemplate: совершенно другой синтаксис, не читает фрагменты, содержащиеся в этом файле, но он также очень мощный.

предпочитаю neosnippet. Установите его в vim, чтобы включить фрагменты с помощью neocomplete авто-завершения.

Neocomplete-удивительный плагин автозаполнения с дополнительной поддержкой фрагментов. Он может завершить simulatiously от словаря, буфер, omnicomplete и фрагменты. Это один истинный плагин, который приносит автозаполнение Vim наравне с лучшими редакторами.

см. инструкцию по установке здесь для neocomplete

после установки выше плагинов вам нужно установить еще один плагин, чтобы включить реагировать конкретные фрагменты

Bundle 'justinj/vim-react-snippets'

см. инструкцию по установке здесь для этого плагина.

если все настройки выполнены правильно, вы включили vim с eslinting, автоматическими завершениями, синтаксисом JSX hightlighting для React, с функциями ES6 !

взято из моего блог пост.