带有 js 扩展名的 React 文件的 GitHub 代码高亮显示答案

【问题标题】：GitHub Code highlighting for React file with js extension带有 js 扩展名的 React 文件的 GitHub 代码高亮显示
【发布时间】：2016-08-05 05:38:04
【问题描述】：

如果您创建了一个 React 文件但使用 .js 扩展名保存它，那么 GitHub 代码突出显示会在文本中到达单引号时中断。在.jsx 中保存相同的文件可以正常工作。

参见this repo 上的示例。文件correct-highlighting.jsx 和incorrect-highlighting.js 具有相同的内容。如您所见，.js 的语法高亮显示错误。

有没有办法解决这个问题，同时仍然使用.jx 扩展？

【问题讨论】：

我一直很好奇，为什么有人想要.js 扩展名为JSX 语法的文件，有什么好处吗？

标签： javascript reactjs github

【解决方案1】：

基于Linguist readme 的一个有点麻烦的解决方案是在文件中添加一个vim 或emacs 模式行。看来您可以在 JS 注释中添加它以保持源代码有效，同时在 GH 上保持正确的语法格式。

https://gist.github.com/ryanjduffy/50ba7c8d8adcbe1615cb016bf799cc69

// vim: syntax=JSX
import React from 'react';

export default class MyClass extends React.Component {
  render() {
    return (
      <a href="google.com">Let's head to google.com</a>
    );
  }
}

【讨论】：

【解决方案2】：

看起来你不能在 github 上强制使用文件的语法。 https://webapps.stackexchange.com/questions/31654/force-github-syntax-highlighting-language-on-source-files

【讨论】：

【解决方案3】：

不幸的是，当文件具有 .js 扩展名时，您看到不正确的 JSX 突出显示的原因实际上是因为 .jsx 是不正确的 JavaScript 语法，因此由于 GitHub 具有准确的语法突出显示和语言检测 gem (Linguist) JSX语法未正确突出显示。

.js 扩展纯粹主义者存在此问题，因为文本编辑器可以更改将哪些类型的文件视为某些类型的扩展。我知道一些语法高亮插件包含 .js 文件作为将其视为 .jsx 的有效扩展名，但也可以将其删除，因为如果您要在没有 React 的情况下自行运行文件，它显然无法工作。

但是，您可以积极主动地在 Linguist 中提交（或贡献）一个问题，并要求 github 将 JSX 语法突出显示扩展到具有 .js 扩展名的文件。

【讨论】：