前端jsx如何设置prettier每个函数空一行？

在使用prettier进行代码格式化时，可以在配置文件中设置 "parser": "babylon" 和 "semi": false，并在"plugins": ["jsx-a11y", "react"] 中添加 "jsx-a11y" 和 "react" 插件。这样就可以让prettier正确地处理JSX语法并在每个函数之间留一个空行了。

1.2.1 全局依赖

1.2.2 dependencies

1.2.3 devDependencies

2.2.1 ./.babelrc

2.2.2 ./tsconfig.json

2.2.3 ./webpack.config.js

2.3.1 ./src/index.tsx

注：

（1）在引用 .tsx 文件的时候，不需要后缀名。而引用 .jsx 文件的时候， 要加上后缀名 。

（2）在 .tsx 中导入 React 需要使用 import * as React from ... ，不能使用 import React from ... ，

为 compilerOptions 增加 allowSyntheticDefaultImports 选项为 true 可以解决这个问题，

但是vs code还是会标红（ 重启vs code可解决 ）。

（3） .jsx 能识别 .jsx 和 .tsx 的默认导出，

.tsx 能识别 .tsx 的默认导出，但是 不能识别 .jsx 的默认导出。

2.3.2 ./src/components/tsx-comp/index.tsx

2.3.3 ./src/components/jsx-comp/...

（1）./src/components/jsx-comp/index.jsx

（2）./src/components/jsx-comp/index.d.ts

注：

为了能让TypeScript识别导入JavaScript模块中变量的类型，还要为模块添加 .d.ts 文件。

2.3.4 ./index.html

React &Webpack

export = and import = require()

import fails with 'no default export'

Compiler Options

---