1

I have created a component for rendering an image with some styles and while trying to commit changes I keep getting below errors in the console. Could you please check and advise why?

This is supposed to be reusable component with props for src and alt and some simple styles, so this is why there is no actual image import yet and I am trying to commit this as a sample for future references.

import * as Styled from "./Image.styled"

const Image = ({src, alt}) => (
    <Styled.Image>
      <img src={src} alt={alt} />
  </Styled.Image>
)

export default Image
import styled from "@emotion/styled"

export const Image = styled.div`
  display: inline block;
  float: left;
  width: 100%;
`

Errors that I am getting:

  3:17  error  Replace `src,·alt` with `·src,·alt·`  prettier/prettier
  3:17  error  'src' is missing in props validation  react/prop-types
  3:22  error  'alt' is missing in props validation  react/prop-types
  4:1   error  Replace `····` with `··`              prettier/prettier
  5:1   error  Delete `··`                           prettier/prettier
  9:21  error  Insert `⏎`                            prettier/prettier

Could you please advise ?

phd
  • 82,685
  • 13
  • 120
  • 165
Emilia
  • 85
  • 6

1 Answers1

1

This is all about whitespace and formatting your code properly. Your code works, but it doesn't look the way the formatter wants it! The formatter is being very picky about two things:

  • The whitespace around your props ({src, alt})
  • The number of spaces you are using for indentation (JS / ES6/ES2020 style guides reccomend 2 spaces, not 4)

It's hugely tedious to fix this yourself. I recommend you install Prettier and configure it to format on save (guide). If you do this right, every time you press cmd+s / ctrl+s, prettier will do the work for you and get your spacings all sorted.

e.g. I put your code in my vscode editor and pressed save, notice the difference:

import * as Styled from './image.styled';

const Image = ({ src, alt }) => (
  <Styled.Image>
    <img src={src} alt={alt} />
  </Styled.Image>
);

export default Image;

Then the image.styled.js file

import styled from 'styled-components'; // I am using a different library

export const Image = styled.div`
  display: inline block;
  float: left;
  width: 100%;
`;

After you have that sorted, I recommend you take a look at ES6 or ES2020 style guides. Best of luck in your learning!

(P.S I have no clue about the props validation issue. Have a separate google of that yourself, or check out related SO questions)

Sean Mizen
  • 129
  • 8
  • 16:1 error Delete `⏎⏎` prettier/prettier 7:2 error Insert `⏎` prettier/prettier. I've solved all the other issues, bt only this one left. Any idea how can I sole this? I tried to enable new line in settings, but it doesn't help also I have some issues with turning on the auto prettier formating on mac, so I have no idea how to solve this :( it it space, or enter that it should be on this line? – Emilia Oct 30 '22 at 22:04
  • @Emilia keep persevering and get that prettier auto-formatter working. find a youtube video and follow the instructions step by step. trust me, i’m a React developer and I could not live without it. you will waste so much time fixing your own white space. – Sean Mizen Nov 01 '22 at 00:05