SublimeText3配置react语法校验-猿码集

1. SublimeText3是什么？

SublimeText3是一款轻量级且支持插件扩展的文本编辑器，被广泛应用于web开发、数据处理等领域。其特点是快速、高效、界面简洁，支持语法高亮、代码提示、多文件编辑等功能，而且可以通过安装插件实现更多的功能扩展。

2. 为什么要配置react语法校验？

React是Facebook推出的一款基于组件化开发的JavaScript库，其主要用途是构建用户界面。在React中使用JSX语法可以使得代码更加简洁易读，而且可以通过编译器进行语法检查，避免因为拼写错误或者语法不规范等问题导致的错误。因此，在SublimeText3中添加react语法校验可以大大提高编码效率，减少错误。

3. 安装SublimeLinter

SublimeLinter是SublimeText3中一款功能强大的语法检查插件，它可以帮助用户对代码进行语法检查，并实时提示错误信息。使用SublimeLinter需要以下步骤：

3.1 安装Package Control

在SublimeText3中，Package Control是一个包管理器，可以方便地安装、卸载插件。安装Package Control可以参考官方文档，或者按下“Ctrl+`”打开控制台后输入以下代码进行安装：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =   sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read())

安装完成后，可以通过按下“Ctrl+Shift+P”打开控制台并输入“install package”来查看已经安装的插件。

3.2 安装SublimeLinter

在安装好Package Control后，就可以通过输入“install package”打开命令面板进行插件搜索和安装。在搜索栏中输入“SublimeLinter”并回车，选择SublimeLinter进行安装。

安装完成后，在插件列表中可以看到SublimeLinter插件，并且在底部状态栏中也会有显示它的状态信息。

4. 安装SublimeLinter-contrib-eslint

SublimeLinter-contrib-eslint是SublimeLinter的eslint插件，可以在SublimeText3中实现对eslint的支持。安装SublimeLinter-contrib-eslint需要以下步骤：

4.1 安装Node.js和npm

SublimeLinter-contrib-eslint依赖于Node.js和npm，因此需要首先安装它们。安装Node.js可以访问官网进行下载安装，npm会随Node.js一同安装。

4.2 安装eslint

在安装好Node.js和npm之后，可以使用npm命令安装eslint，命令如下：

npm install -g eslint

其中，-g代表全局安装。

4.3 安装SublimeLinter-contrib-eslint

在安装好eslint之后，就可以使用npm命令安装SublimeLinter-contrib-eslint，命令如下：

npm install -g eslint-plugin-react sudo ln -s $(npm root -g)/eslint/bin/eslint.js /usr/local/bin/eslint npm install -g eslint-config-airbnb npm install -g eslint-plugin-html npm install -g eslint-plugin-import npm install -g eslint-plugin-jsx-a11y npm install -g eslint-plugin-react npm install -g sublimeLinter-eslint

安装完成后，需要同时启用SublimeLinter-contrib-eslint插件。打开sublime text，使用快捷键“ctrl+shift+p”打开命令面板，输入“SublimeLinter”找到“SublimeLinter：enable”选项，选择开启。

5. 配置SublimeLinter-contrib-eslint

在安装好SublimeLinter-contrib-eslint之后，需要进行一些配置以使其能够在SublimeText3中正常工作。配置SublimeLinter-contrib-eslint需要以下步骤：

5.1 查找.eslintrc文件

在需要检查的项目根目录下，可以通过查找.eslintrc文件来判断当前ESLint的配置。如果不存在，需要新增一个.eslintrc文件。ESLint配置文件的具体语法可以参考官方文档。

5.2 配置Sublime Text 3

在打开Sublime Text后，选择Preferences → Package Settings → SublimeLinter → Settings-User，在文件末尾添加如下代码：

{
    "user": {
        "linters": {
            "eslint": {
                "@disable": false,
                "args": [
                    "--stdin",
                    "--stdin-filename",
                    "$file",
                    "--format",
                    "json"
                ],
                "excludes": []
            }
        },
        "linting": {
            "eslint": {
                "enabled": true,
                "args": [],
                "excludes": [],
                "warnings_only": false
            }
        }
    }
}

其中，args选项可以配置传递给ESLint的命令行参数，excludes选项可以指定文件名或者文件夹名，使其不被检查。

总结

SublimeText3是一款功能强大、使用方便、插件丰富的文本编辑器，加上SublimeLinter和SublimeLinter-contrib-eslint插件，可以帮助我们在SublimeText3中实现对react语法的校验，大大提高开发效率和代码规范性。

上述步骤是在MacOS环境下进行的，对于其他系统环境可能会略有不同，需要根据具体情况进行相应配置。

SublimeText3配置react语法校验