[英]How do you configure VSCode jsconfig for React?
I am trying to make VSCode to work smoothly with my React project.我正在尝试使 VSCode 与我的 React 项目顺利运行。 I am refering to the ability to click into a component and go inside, peek at the component or propose stuff for auto completion (intellisense).我指的是单击组件和内部 go 的能力,查看组件或提出自动完成的内容(智能感知)。
I have this so far:到目前为止我有这个:
{
"compilerOptions": {
"module": "es6",
"target": "es2019",
"jsx": "react",
"baseUrl": ".",
"paths": {
"@Reducers/*": ["./src/reducers/*"],
"@Selectors/*": ["./src/selectors/*"],
"@Components/*": ["./src/components/*"],
"@App/*": ["./src/components/App/*"],
"@Footer/*": ["./src/components/Footer/*"],
"@Header/*": ["./src/components/Header/*"],
}
},
"include" : ["src/**/*"],
"exclude": ["node_modules", "dist", "config", ".vscode"]
}
I do not use CRA.我不使用 CRA。
Any idea why is not working?知道为什么不工作吗? Any help would be appreciated.任何帮助,将不胜感激。 Thank you in advance and regards预先感谢您和问候
edit: it seems that with module:commonjs instead of es6 is working better, any idea of why is this?编辑:似乎使用 module:commonjs 而不是 es6 效果更好,知道这是为什么吗? I am using es6 imports!我正在使用 es6 导入!
edit2: the reason is explained here: https://github.com/Microsoft/vscode/issues/24715 edit2:原因在这里解释: https://github.com/Microsoft/vscode/issues/24715
We need more information about you project.我们需要有关您的项目的更多信息。 but, All most problem about absolute path is base url.但是,关于绝对路径的所有最大问题都是基础 url。
If you used Webpack, Read Webpack - Alias .如果您使用 Webpack,请阅读Webpack - Alias 。 and then read this too.然后也读这个。 Github CRA Path Issues Github CRA 路径问题
I used this.我用过这个。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
}
}
const path = require('path');
// Webpack Config
export default {
// ...
resolve: {
alias: {
['@']: path.join(root, 'src')
}
}
}
If you have a root path, this is easy to change paths.如果您有根路径,则很容易更改路径。 So I recommend that don't use multiple '@' pahts
too.所以我建议don't use multiple '@' pahts
。
The solution at the end was to use module: commonjs instead of module: es6最后的解决方案是使用 module: commonjs 而不是 module: es6
This is explained here: https://github.com/Microsoft/vscode/issues/24715这在这里解释: https://github.com/Microsoft/vscode/issues/24715
Quote: "In a jsconfig, the module option only changes how paths are resolved"引用:“在 jsconfig 中,模块选项只会改变路径的解析方式”
You need to install extensions for ReactJs like: ES7 React/Redux/GraphQL/React-Native snippets
or Simple React Snippets
.您需要为 ReactJs 安装扩展,例如: ES7 React/Redux/GraphQL/React-Native snippets
或Simple React Snippets
。 Try these two.试试这两个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.