如何在react代码中修复vscode自动间距问题
在React代码中修复VS Code自动间距问题可以通过以下几种方式解决：
- 使用ESLint插件：VS Code提供了ESLint插件，可以通过配置.eslintrc文件来规范代码风格和自动修复代码问题。在React项目中，可以使用一些规则来修复自动间距问题，比如禁用不必要的空格和缩进。具体操作步骤如下：
- 在VS Code中安装ESLint插件。
- 在React项目根目录下创建.eslintrc文件。
- 在.eslintrc文件中配置rules，比如设置"no-multi-spaces"为"error"，禁用多余的空格。
- 使用Prettier插件：Prettier是一个代码格式化工具，可以自动格式化代码并修复自动间距问题。在React项目中使用Prettier插件可以实现自动修复代码问题。具体操作步骤如下：
- 在VS Code中安装Prettier插件。
- 在React项目根目录下创建.prettierrc文件。
- 在.prettierrc文件中配置规则，比如设置"trailingComma"为"none"，禁止使用尾随逗号。
- 使用EditorConfig插件：EditorConfig是一个跨编辑器的插件，可以统一不同编辑器的代码风格。通过在项目中添加.editorconfig文件并配置规则，可以解决自动间距问题。具体操作步骤如下：
- 在VS Code中安装EditorConfig插件。
- 在React项目根目录下创建.editorconfig文件。
- 在.editorconfig文件中配置规则，比如设置"trim_trailing_whitespace"为"true"，删除行末多余空格。
以上是几种常用的方法来修复React代码中的VS Code自动间距问题。根据具体情况选择适合的方法，并根据项目需求进行配置。
相关·内容
我熟悉了Android开发，并开始阅读一些关于React Native的信息。我遇到的一个问题是我看不到屏幕布局。
例如，在Android Studio中，我可以在不运行应用程序的情况下看到XML布局的设计。也许在React Native中有这样的工具，但我没有在WebStorm和VSCode中看到它们。也许我错了，他们是存在的，那么，在这种情况下，你能帮我找到他们吗？
浏览 2提问于2019-08-02得票数 1
在节点项目上，我更漂亮的插件与使用create-react-app创建的项目的行为不同。 当我编写如下代码时： var test = { a: 1
}; 并将文件保存在react应用程序中，它看起来很漂亮： var test = { a: 1 }; 在节点项目中，它看起来很像： var test = {a: 1}; 这将使林特抱怨A space is required before '}'. 我不明白为什么prettier会在使用create-react应用创建的应用中表现出不同的行为。具有相同的vscode设置和相同的prettier.yml。 我正在使用Prettier
浏览 42提问于2019-12-19得票数 0
回答已采纳
我对Reactjs很陌生，我正在尝试为Reactjs和jsx配置VSCode。
现有信息似乎过时了..。我设法在VScode中配置了reactjs。
我安装了以下扩展：
排字安装程序
台风
Babel ES6/ES7
Reactjs代码段
由TwentyChung编写的jsx
VSCode语言模式现在显示"Javascript“。
我无法开始工作的是react jsx语法突出显示和intellisense。我遗漏了什么？有关于jsx配置的说明吗？
Windows 1064，VSCode 1.5.2，在.js中响应文件
谢谢,
恩里科
浏览 2提问于2016-09-22得票数 5
回答已采纳
如果我试图在对象初始化器中编写一个方法，例如通过键入：
myFunction() {
然后vscode添加一个}，让我手动添加,。
有没有办法让它总是添加},
我应该注意到，在我的编码标准中，所有对象属性都应该以逗号结尾(即包括最后一个逗号)。
我在Windows10(WSL之外)上运行vscode 1.13.0。
浏览 6提问于2017-06-12得票数 9
我使用React和VSCode，我想在保存代码时设置自关闭，但我不知道如何.
我想做的是
<Hello></Hello>
在我保存代码
<Hello />
我可以在哪里设置自动关闭？
谢谢。
浏览 5提问于2019-09-16得票数 11
回答已采纳
1回答
我在Reactjs中使用Material UI。我对网格列表组件有问题。我尝试使用gridList - 1000x1000px，所以我在自定义grid样式中将高度和宽度分别指定为1000和1000，如文档中所示。应该有10列，每个单元格的高度应该是100px。
当我在网格列表中有超过1行时，问题就来了。行元素之间的间距太大。我试图覆盖CSS样式，但它们都不能很好地工作。我希望网格单元格的行堆叠在一起，而不是在它们之间有这么大的间隙。
单击此处查看
这是我的代码，
import React, { Component } from 'react';
import { connect
浏览 17提问于2017-12-31得票数 2
回答已采纳
1回答
我在Ubuntu20.04上使用VSCode用JS(Node.js)编写代码。我配置了我的ESlint settings.json {
"todo-tree.tree.showScanModeButton": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"edito
浏览 55提问于2020-10-19得票数 3
如何在VSCode中打开自定义片段中的自动完成？我在javascriptreact.json中创建我的片段
"importReact": {
"prefix": "import-stateless",
"body": ["import React from 'react';"],
"description": "import React statement"
},
"consolelog": {
&
浏览 4提问于2019-06-14得票数 4
回答已采纳
我正在学习使用create-react-app和配置ESLint的教程。
我已经全局安装了ESLint，根文件夹和.vscode/settings.json中有一个.eslintrc.json文件
目前的问题：
配置后，ESLint输出正常运行，但没有从我的代码中提取任何错误.。
Ex:当我在.textContent上空盘旋时，它应该建议使用.toHaveTextContent：
我尝试重新启动VSCode，卸载ESLint扩展并再次安装，但是仍然-没有工作，输出中没有错误。
截图和代码：
文件树：
ESLint输出：
.eslintrc.json
{
"plug
浏览 14提问于2022-05-18得票数 0
VSCode版本：
Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T15:04:31.999Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Linux x64 5.2.11-050211-generic
18.04 操作系统版本：Ubuntu
复制步骤：
Open 我按照官方文档创建了一个新的托管代码片段- pallette > Type‘>选择
浏览 2提问于2020-01-19得票数 1
回答已采纳
我从Atom切换到了VSCode。有一点是非常烦人的。下面是一个例子，它促使我在这里写了一个问题。 ? 也就是说，按tab键始终插入两个空格，并且不了解代码在上行中的开始位置。 在Atom中，制表符可以根据需要插入1个空格： ?
浏览 125提问于2021-08-25得票数 1
2回答
我的问题是，当我编码vscode的编辑器时，自动替换项目中所有文件的相对路径到绝对路径。
例如:当我像这样导入时：
import { login } from '../logic.redux/action'
5分钟后(可能有些操作，如保存或导入另一个文件)，它将转换为：
import { login } from '@module/login/logic.redux/action'
说真的这是把所有文件都重写为绝对文件。告诉我我做错了什么
我的项目包括:类型记录+反应-本机(项目)
这是我的tsconfig.json
{
"comp
浏览 0提问于2018-07-12得票数 6
回答已采纳
我正在使用es-lint VScode扩展，它捕获了5个linting错误，但是当我从package.json运行npm run lint时，它只列出了2个错误。我想知道为什么终端没有输出所有的内联错误，所以我可以在保存时用esw --fix修复它。
注意:我同时使用了prettier和airbnb配置规则。
这是我的.eslintrc：
{
"extends": ["airbnb", "prettier"],
"plugins": ["prettier"],
"globals": {
浏览 0提问于2017-12-15得票数 0
对ReactJS来说是新手。不确定我是否正确理解了它。我用像React.Component这样的方法定义了一个表扩展AddColumn。我使用React.createElement创建了表。如何使用我在表中定义的方法？
var element = React.createElement(CustomTable, {
vscode:vscode,
tableName:"test"
});
element.AddColumn("string", "haha", function(i, j){
});
我试过上面的代码，它不像预期的那样工作
浏览 2提问于2022-01-20得票数 -1
在向.eslintrc.js添加jest插件时，我得到以下堆栈错误：
TypeError: Cannot read property 'meta' of undefined
使用react-native CLI创建新的react本机项目安装eslint并在.eslintrc.js中的插件阵列中运行./node_modules/.bin/eslint --initInstall eslint-plugin-jestAdd jest
.eslintrc.js
module.exports = {
env: {
browser: true,
es6: true
浏览 121提问于2019-05-23得票数 1
VSCode自动格式化会在React类的类型规范中的问号之间添加一个空格。
我认为这只是在2019年3月新版本的VSCode (版本1.33)中才开始发生的，但我可能错了
我在VSCode中使用了reactjs + flowtype堆栈，格式发生了以下变化。
class IdPRPConfigC extends React.Component<{file: ?string}, {}> {}
变成了
class IdPRPConfigC extends React.Component<{file: ? string}, {}> {
请注意，在可选标志(?)之后插入了一个空
浏览 9提问于2019-05-10得票数 2
2回答
我正在使用vue，ts，vite和volar扩展。
在Vs代码中，我得到了错误Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>,
浏览 38提问于2021-12-10得票数 13
回答已采纳
在eslint插件的帮助下，当源代码中出现错误时，我们可以在vscode中得到警告。但是在那之后，我如何格式化代码以消除这些错误呢?如果我只是实现内置格式命令，它将得到一个不适合eslint的配置的结果。那么，有没有一个插件可以解决这个问题呢？
浏览 0提问于2017-02-08得票数 0
回答已采纳
2回答
我搜索了，但是除了文档之外，我找不到任何外部来源，而仅仅跟随这些文档就不允许调试iOS或Android中的本地应用程序。
我一直收到错误消息(这一条用于Android，对于iOS类似：
vscode-react本机无法在导入脚本。调试不起作用:尝试从应用程序中重新加载JS，或者重新连接VS代码调试器:路径必须是字符串
我的launch.json文件如下：
{
"version": "0.2.0",
"configurations": [
{
"name": "
浏览 4提问于2016-12-24得票数 13
我的大部分代码都是在WSL2 2:Ubuntu中编写的。我通常将终端打开到WSL2 2:Ubuntu中，切换到项目目录，然后通过键入VSCode启动code .
当我寻找扩展时，它们会出现(?)要在Windows本身中安装VSCode，然后稍后，VSCode将建议在WSL:Ubuntu中安装扩展
何时应该将扩展安装到WSL:Ubuntu中？
除了将Ubuntu安装到VSCode窗口之外，在WSL:Ubuntu中安装扩展还能得到什么好处？
在WSL2 2:Ubuntu上安装到VSCode Windows中的什么类型的VSCode扩展不起作用？
如果我理解下面的图表，那么任何在
浏览 10提问于2020-07-23得票数 5
1回答
我在Vscode 1.33.1，Node 11.12，类型记录3.4.3，vscode-chrome debug -core 6.7.46上，我正在尝试调试一个。
只要我不点击await，一切都会很完美。但是，当我点击一个包含await的行时，我不会在await行之后碰到任何断点(包括await行)。代码正常运行，但调试器会出错。如果我在await行前面放置一个断点并尝试进入/over/out，它会跳入丑陋的index.bundle代码。
这种情况发生在我的应用程序中的多个位置，所以这也不是一个孤立的例子。
下面是我在launch.json中的活动配置
{
"name"
浏览 0提问于2019-04-26得票数 10
我在开发一个反应项目。我使用postcss-嵌套插件来支持css嵌套规则，并使用babel- css -模块来支持react中的css模块。最后，css样式可以很好地工作，所以我确信这两个插件没有问题。但是vscode似乎不能对css嵌套规则进行正则化。它显示下划线以发出警告，如下所示：
现在vscode在编写代码时不能给出提示。我必须完全键入css属性名。对我的问题有什么想法吗？
浏览 12提问于2022-09-08得票数 0
回答已采纳
在一个Vue3项目中，在Visual代码中，我使用ESLint和Volar ("Vue语言特性“和"TypeScript Vue插件”)扩展。
直到最近，保存上的格式还运行得很好。下面是我在项目中拥有的.vscode/settings.json文件：
{
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"t
浏览 23提问于2022-11-07得票数 0
回答已采纳
6回答
切换到vscode 1.68.1之后
每次保存文件时，它都会自动从导入中删除React，虽然这可能是一个eslint问题，因为我使用eslint进行格式化，但是在删除eslint插件之后，问题仍然是一样的。
这是我的settings.json
{
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"files.eol": "\r\n",
"editor.codeActionsOnSave": {
浏览 45提问于2022-06-21得票数 9
import console = require("console");
console. << I类型。以上内容会自动导入到VScode中。有人知道怎么禁用它吗？
(我假设它是我的一个扩展。可能更漂亮。)
编辑:它只在React Typescript环境中发生。在没有react的情况下不能在Typescript中使用。
浏览 11提问于2018-11-13得票数 153
我是新的反应本机，并试图获得我的第一个反应应用程序运行在Android仿真。在运行调试器时，我会收到以下错误消息：
无法调试。执行命令'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android --无包程序‘时出错:执行命令'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android -no packager’时出错(错误代码101)
launch.json
{
"version": "0.2.0
浏览 1提问于2020-06-09得票数 2
我的VSCode在使用React时不会自动完成图像路径。文件夹和.js文件工作正常。我尝试使用一些扩展名，但现在文件夹/js文件是重复的。
浏览 22提问于2021-10-15得票数 0
回答已采纳
6回答
我按照以下步骤在VSCode中进行调试
我把我的nexus6p与USB电缆与我的MBP2015和启用的开发人员选项和USB调试，但当我选择调试Android在VSC，我得到这个
[Error] "Could not debug. Android project not found."
我也附了这张照片。
如果我想在IOS模拟器上调试，我在VSC中选择了debug IOS，但是我得到了这个，并且模拟器没有启动。
[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-rea
浏览 4提问于2017-10-09得票数 8
回答已采纳
我的代码有一些问题。
import * as React from "react";
export interface SearchProductSate {
[key: string]: string;
Id: string;
Name: string;
Section: string;
Domaine: string;
IsActive: string;
}
export class SearchProductComponent extends React.Component<
SearchProductProps,
SearchP
浏览 1提问于2018-08-22得票数 0
回答已采纳
我使用vscode，并在保存文件时启用了自动格式化配置来格式化文件。但是我最近发现vscode编辑器总是在每个js文件的EOF处添加一个换行符，那么如何禁用它呢？ 我特别添加了配置"files.insertFinalNewline": false,，但它仍然不起作用。 vscode信息： Version: 1.33.1 (system setup)
Commit: 51b0b28134d51361cf996d2f0a1c698247aeabd8
Date: 2019-04-11T08:27:14.102Z
Electron: 3.1.6
Chrome: 66.0.3359.1
浏览 62提问于2019-04-29得票数 3
回答已采纳
我想在React.js的VSCode中添加一些自定义的代码片段。我意识到在VSCode中有两个文件。javascript.json和javascriptreact.json.javascript.json工作得很好，但是当我将代码片段移到javascriptreact.json，、、VSCode、时，就不认识它们了。
如果我能够在javacriptreact.json文件中隔离这些片段，那就太好了，因为我还编写了服务器端的JavaScript。
我猜VSCode并没有把这个应用看作是一个反应应用。有办法解决这个问题吗？
浏览 0提问于2019-03-28得票数 3
回答已采纳
因此，我创建了一个consoledata.ts文件来记录我作为参数传入的任何内容，如下所示： /* eslint-disable no-console */
export default function ConsoleData(props: any) {
console.log(props);
} 现在使用VSCode搜索图标，我将代码中的每个console.log都更改为consoleData，因为逐个更改它们可能需要花费我一天的时间。现在我的问题是，consoleData模块没有导入。有什么办法可以做到这一点吗？
浏览 150提问于2021-10-25得票数 0
2回答
我尝试在Visual Studio代码中使用React Native (这应该是最好的)，但当我尝试调试时，它给了我一个错误。
我已经安装了React Native Tools扩展，但是当我尝试启动(F5)时，它返回"Error npm not debug.确定reactive-native npm包安装在根目录下吗？“
我还尝试使用F1 "> React Native: Run Android“发送命令，但它返回错误”当前工作空间不是React Native项目“。
我使用的是Ubuntu 16.04 LTS。
Visual Studio代码1.11.2
react-n
浏览 2提问于2017-04-19得票数 3
我正在使用Javascript开发一个React Native项目。 我希望vscode显示快速修复导入建议，如下所示： ? 问题是它还会显示typescript错误，如下所示： ? 这是我的jsconfig.json文件： {
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"checkJs": tru
浏览 54提问于2021-09-25得票数 0
1回答
样式组件颜色选择器未显示
、、、、
我已经用了大约6个月的VSCode和React和样式组件--没有问题。最近，当包含任何涉及颜色的CSS属性时，颜色选择器还没有显示出来。快速重新加载窗口或重新启动VScode现在总是解决这个issue..until问题。我已经将选定的语言更改为CSS、Javascript、Javascript React和CSS (样式组件)。毫无办法。
我尝试过卸载/重新安装样式的组件扩展。没什么。我卸载并重新安装了VSCode，但这也不起作用。
我安装了这个分机，
任何帮助都将不胜感激。
谢谢
**编辑:对于将来可能遇到这种情况的人，安装这个扩展可以解决这个问题。
浏览 21提问于2022-03-14得票数 2
回答已采纳
1回答
使用可视化源代码，我已经安装了更漂亮的。我还为vscode安装了更漂亮的插件。我想知道如何显示错误的下划线。我可以看到他们用的是遮羞布，但不仅仅是更漂亮的。也许只有eslint插件才允许这种视觉化的方向性。但是，格式化是有效的。只是视觉上的问题。
浏览 1提问于2021-07-05得票数 0
回答已采纳
我使用Atom进行React编码已经有很多年了。我一直想切换到VSCode，因为这似乎是社区发展的方向。但有一件事让我无法自拔。在Atom中，有一个名为autocomplete-paths的扩展，它允许您在不确切知道要导入文件的位置的情况下执行相对import。所以，我可以这样做：
import MyComponent from 'MyComponent'
...and，则扩展会将其转换为：
import MyComponent from '../../path/to/file/MyComponent'
鉴于我的React项目被设置为执行相对导入，这对我来说是一
浏览 7提问于2019-11-26得票数 1
回答已采纳
我想知道VSCode中是否有一种方法可以自动修复util库中的弃用。
示例：
if (isNullOrUndefined(this.api)) {
应：
if (this.api === null || this.api === undefined) {
没有自动修复选项，只有规则禁用选项.但悬停文本显示了修复！
浏览 0提问于2019-05-01得票数 0
回答已采纳
最近，我开始在VSCode中获得带有特定导入的IDE错误。它开始发生，我相信，从最近的VSCode更新，因为我的模块被纱线锁定，源不应该改变。为了明确起见，这段代码确实进行了编译，但是IDE正在抱怨。
我的导入semantic-ui-react正在解析为commonjs输出子目录中的dist index.d.ts文件，但我需要它指向节点模块根目录中的index.d.ts文件，这是我需要使用的组件声明的地方。
有什么办法可以推翻这个吗？
我已经张贴了下面的详细图片，绿色是需要导入的声明文件。
浏览 0提问于2018-06-19得票数 0
回答已采纳
3回答
我正在尝试为react-native在上设置调试环境，在Mac上设置代码。这里是launch.json：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
浏览 4提问于2017-12-05得票数 6
回答已采纳
有人能告诉我为什么在我的JSX中使用可选链接时会丢失代码格式吗？没有抛出错误，代码运行，它只是不喜欢它。 ? 如上所示，括号后的所有内容现在都是蓝色的，而它应该是红色的。目前使用最新的create-react-app，ESLint，prettier，并使用VSCode作为我的开发环境。
浏览 13提问于2021-10-13得票数 0
我正在尝试为基于Webview的vscode开发一个新的扩展，但我遇到了从客户端向扩展发布消息的问题。作为一个初学者，我使用了this repo，并且我正在关注这些steps from Microsoft。 正如您在示例中所看到的那样： (function() {
const vscode = acquireVsCodeApi(); 我的问题是，在我的react应用程序中，acquireVsCodeApi就像不存在一样。我尝试了多种方法，例如。在componentDidMount生命周期中，但没有运气。 This user似乎能够运行它，但他的应用程序的一部分丢失了，
浏览 180提问于2019-05-21得票数 6
回答已采纳
因此，我创建了一个react应用程序，我在这方面非常新，它已经在过去开放了，但是现在我运行npm，它出现了：
PS C:\Users\maxim\.vscode\extensions\second react> npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\maxim\.vscode\extensions\second react/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or dir
浏览 10提问于2022-11-23得票数 -3
回答已采纳
环境
vscode版本1.19.1 (1.19.1)
卢比警察(0.52.1)
达尔文mbp 16.7.0达尔文内核版本16.7.0: Wed 10月4日00:17:00 PDT 2017；根:xnu-3789.71.6~1/ReleaseX86_64 x86_64
Ruby2.3.5p376 (2017-09-14修订版59905) x86_64-darwin16 16
遵循并安装所有的gems，并像这样编辑settings.json。
{
"ruby.rubocop.executePath": "/Users/ac/.rbenv/shi
浏览 13提问于2017-12-30得票数 27
回答已采纳
1回答
如何在React上创建多个页面
、、、、
因此，我已经检查了多个帖子和网站，但我无法让它工作。它只是用肚脐条呈现一个白色屏幕。这是代码：
App.js：
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
function App() {
return (
<Router>
<Nav/>
<Routes>
<Route path='/about' element={About}/>
</Routes>
浏览 2提问于2022-04-25得票数 0
错误：
******** Unhandled error in debug adapter: SyntaxError: Unexpected token L in JSON at position 0
at JSON.parse (<anonymous>)
at Pipe.channel.onread (internal/child_process.js:471:28)
大家好，
我在这里和任何其他地方都发现了许多其他问题/问题，但是没有一个问题包括“调试适配器中的未处理错误”。我尝试了很多工作流程，但都没有效果。
简介：
操作系统: Windows 64x
浏览 5提问于2018-07-16得票数 4
1回答
我在使用VSCode Extension开发React时遇到了这个问题。我知道VSCode允许使用Webview集成HTML/JS/CSS代码。但是链接不工作到它，所以react-router的网页不起作用。
不工作：
<Link to="/my/url">
我的问题是如何使用React导航实现vscode扩展how视图中的导航？
如有任何帮助或建议，敬请见谅。
浏览 2提问于2020-01-07得票数 0
回答已采纳
我正在编写VS代码扩展，以帮助将React.createClass迁移到类扩展React.Component。问题是，我无法让vscode.commands.executeCommand('vscode.executeFormatDocumentProvider', ...)工作。
注意，下面的代码是纯JavaScript，而不是TypeScript。
function activate(context) {
context.subscriptions.push(vscode.commands.registerCommand('migrate-to-react-
浏览 6提问于2017-05-05得票数 5
我已经在我的typescript项目中安装了antd：
"antd": "^4.6.2",
它工作得很好，并且我的项目使用antd组件进行构建(webpack曾经使用过构建)，但是在VSCode中我没有得到类型，并且它给了我这个错误：
这是我的tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "
浏览 5提问于2020-09-04得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
