jjzjj

javascript - 如何在 vim 中添加 react jsx 作为 javascript 文件类型并启用 eslinting、自动完成？

coder 2024-07-28 原文

我最近开始使用vim。我想设置具有.jsx 的文件扩展名被视为 .js Vim 中的 java 脚本文件。
我也想用我的 .jsx 启用 es-linting、片段文件。我在我的系统中安装了以下软件包

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

我也安装了Bundle 'mxw/vim-jsx'在 vim 中支持 jsx。

还在我的 .vimrc 文件中添加了以下几行
let g:syntastic_javascript_checkers = ['eslint']
let g:jsx_ext_required = 0

编辑
找到了这个用于 react 片段的 vim 插件:
Vim-react-snippets

最佳答案

我决定写这个教程来设置 vim 为 react 深入开发，以便初学者在开始使用 vim 和 react 时会发现这很有用。

语法高亮

要在 vim 中突出显示 jsx 语法，请使用 mxw's Vim JSX 插入。

安装 mxw/vim-jsx 插件的步骤

如果您使用 Vundle ,

在您的 .vimrc 中添加以下几行:

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

这个插件依赖于 pangloss/vim-javascript 所以你也需要安装它。

要从 vim 中安装，请使用以下命令。
:so ~/.vimrc

源已更改 .vimrc配置文件并使用，next
:PluginInstall

如果你使用病原体
cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git

在 javascript 文件中启用 JSX 语法高亮

在您的 . vimrc :
let g:jsx_ext_required = 0

在 vim 中启用 eslint

您需要安装以下帮助程序 npm 包以及最新的 eslint (在撰写本文时使用 2.11.1 )。
还要确保您有 node.js 版本 4 或以上 安装在您的系统中。

babel-eslint - 支持 ES6 linting

eslint 插件 react - 为 ESLint react 特定的 linting 规则
例如，防止在 componentDidMount 中使用 setState
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

创建配置文件 .eslintrc.json 在您项目的根目录中:
(您可以使用 eslint 以交互方式生成 eslint 配置文件)
eslint --init

(如果您选择了任何预设，请确保您还为该 lint 预设安装了所需的包)

我扩展了“airbnb”，但覆盖了我项目的一些规则。您可以使用
“扩展”:“eslint:推荐”启用 eslint 推荐的一些常见的 lint 规则
这是我的 .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 插件集成
我决定使用 Syntastic 和 vim 进行语法错误检查。
let g:syntastic_javascript_checkers = ['eslint']

一切就绪，但 Syntastic 仍然存在一个问题。
Syntastic 搜索全局 node_modules 而不是本地项目。

一种解决方案是在全局范围内安装所有软件包 eslint、babel-eslint 等，这绝对不是一个好习惯。

另一种解决方案是

定义一个 npm 脚本 在您的 package.json 
"eslint": "eslint -c .eslintrc.json"

它将在当前路径中添加所有本地安装的 npm 包，因此它们将可供执行。

而在您的 .vimrc文件添加
let g:syntastic_javascript_eslint_exe = 'npm run eslint --'

在这里，我们通过 vim 中的 npm 脚本调用 linting。

替代:使用插头 'mtscout6/syntastic-local-eslint.vim' 插入

打开文件时在 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

摘要和自动完成

片段引擎有不同的分支，它们允许用户通过键入片段名称来插入片段，然后点击扩展映射。
  • github.com/SirVer/ultisnips:
    python，支持这个 repo 中的所有片段。
  • github.com/garbas/vim-snipmate:
    VimL，snipmate-snippets，引擎有时表现得很奇怪。支持片段/*
  • github.com/Shougo/neosnippet:
    VimL，支持带有一些配置的代码段/*。
  • github.com/drmingdrmer/xptemplate:完全不同的语法，不读取此文件中包含的片段，但它也非常强大。

    • 我更喜欢 neosnippet .将其安装在您的 vim 中，以使用 启用代码段Neocomplete 用于自动完成。

    Neocomplete 是一个了不起的自动完成插件，额外支持片段。它可以从字典、缓冲区、omnicomplete 和snippets 中模拟完成。这是一款让 Vim 自动完成功能与最好的编辑器相媲美的真正插件。

    查看安装说明 here for neocomplete

    安装上述插件后，您需要再安装一个插件以启用特定片段
    Bundle 'justinj/vim-react-snippets'

    查看安装说明 here对于那个插件。

    如果所有设置都正确完成，那么您已经为 React 启用了带有 eslinting、自动完成、JSX 语法高亮显示以及 ES6 功能的 vim!

    取自我的 blog邮政。

    关于javascript - 如何在 vim 中添加 react jsx 作为 javascript 文件类型并启用 eslinting、自动完成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34578154/

    javascript何在strong34codevimreactjsreact-jsxeslint

    有关javascript - 如何在 vim 中添加 react jsx 作为 javascript 文件类型并启用 eslinting、自动完成？的更多相关文章

    1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    2. ruby - 其他文件中的 Rake 任务 - 2

      我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

    3. ruby - 如何在 Ruby 中顺序创建 PI - 2

      出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

    4. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

      我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

    5. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

      当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

    6. ruby-on-rails - Rails 3 中的多个路由文件 - 2

      Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

    7. ruby - 将差异补丁应用于字符串/文件 - 2

      对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

    8. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

      我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

    9. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

      如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

    10. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

      我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

    随机推荐