• 04-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This is a glossary of all the common issues in Prettier - Prettier

Troubleshooting Common Issues in Prettier – Prettier

Lightrun Team
Lightrun Team
04-Jan-2023

Project Description

 

Prettier is a code formatter that is designed to help developers automatically format their code in a consistent style. It works with many different programming languages, including JavaScript, TypeScript, JSON, HTML, and more. prettier-prettier is a command-line interface (CLI) for Prettier that allows you to use it as part of your development workflow.

You can use prettier-prettier to format your code automatically as you work on it, or you can run it manually to format your code before committing it to version control. Prettier is designed to be opinionated, so it automatically formats your code in a way that conforms to its own set of style rules.

This can help to reduce the amount of time you spend formatting your code, and can also make it easier to work on projects with multiple contributors, as everyone’s code will be consistently formatted.

 

Troubleshooting Prettier – Prettier with the Lightrun Developer Observability Platform

 

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

The most common issues for Prettier – Prettier are:

 

Error: Failed to load plugin ‘prettier’ declared in ‘.eslintrc.js » @react-native-community/eslint-config’: Cannot find module ‘eslint-plugin-prettier’ Require stack:

 

It looks like you are encountering an error when using Prettier with the eslint-plugin-prettier plugin. This error is occurring because the eslint-plugin-prettier plugin is not installed or is not in the correct location.

To fix this error, you will need to install the eslint-plugin-prettier plugin. You can do this by running the following command in your terminal:

npm install --save-dev eslint-plugin-prettier

Alternatively, if you are using Yarn, you can run the following command:

yarn add --dev eslint-plugin-prettier

Once the plugin is installed, you will need to make sure that it is correctly configured in your .eslintrc.js file. You should add the following line to the plugins section of your .eslintrc.js file:

'prettier'

You may also need to add a configuration for the prettier plugin to the rules section of your .eslintrc.js file. The configuration should look something like this:

'prettier/prettier': 'error'

This will enable the prettier plugin and tell ESLint to treat any formatting errors detected by Prettier as errors.

 

A better Prettier CLI and config file

 

Prettier includes its own CLI, which allows you to use Prettier as part of your development workflow. You can use the Prettier CLI to format your code automatically as you work on it, or you can run it manually to format your code before committing it to version control. Prettier also includes a configuration file, which allows you to specify options that control how Prettier formats your code.

This tool is a wrapper for Prettier that adds additional features or functionality to the CLI or configuration options. For example, the tool might allow you to specify additional configuration options or might provide additional commands that make it easier to use Prettier as part of your development workflow.

 

Newline for each item in JSON array

 

To specify that Prettier should insert a newline for each item in a JSON array, you can use the json.arrayBracketNewLine option. This option can be set to true to cause Prettier to insert a newline after the opening array bracket and before the closing array bracket for arrays that span multiple lines.

Here is an example of how you might configure this option in your Prettier configuration file:

{
  "json.arrayBracketNewLine": true
}

Alternatively, you can pass this option to Prettier on the command line using the --json.arrayBracketNewLine flag. For example:

prettier --json.arrayBracketNewLine true file.json

 

Disable prettier for a single file

 

If you want to disable Prettier for a single file, there are a few different ways you can do this.

One option is to use a “directive comment” at the top of the file. Directive comments are comments that begin with // prettier-ignore or // prettier-off, and that tell Prettier to ignore the contents of the file. For example:

// prettier-ignore

const foo = {
  bar: 1,
  baz: 2,
};

Another option is to use a configuration file to specify that Prettier should ignore certain files or directories. Prettier configuration files use the JSON format, and you can use the ignore property to specify a list of patterns that match the files or directories you want Prettier to ignore. For example:

{
  "ignore": ["**/foo.js"]
}

This configuration would cause Prettier to ignore any file named foo.js, regardless of its location in the file tree. You can use wildcards and other pattern matching syntax to specify more complex patterns if needed.

 

Errors while linting TypeScript

 

One common cause of errors when linting TypeScript with Prettier is a version mismatch between Prettier and the TypeScript compiler. Prettier includes its own TypeScript parser, which it uses to parse and format TypeScript code. If the version of the TypeScript compiler that you are using is newer than the version of the TypeScript parser that Prettier is using, you may see errors related to unrecognized syntax or other issues.

To fix this issue, you can try updating Prettier to the latest version. This will ensure that you are using the most recent version of the TypeScript parser, which should be compatible with the version of the TypeScript compiler that you are using.

Another possible cause of errors when linting TypeScript with Prettier is a conflict with other tools or plugins that you are using. For example, if you are using ESLint with the @typescript-eslint/parser plugin to lint your TypeScript code, you may see conflicts with Prettier if the two tools have different configurations or rules.

To fix this issue, you can try updating the configurations or rules for your tools and plugins to ensure that they are compatible with Prettier. You may also need to disable or modify certain rules or plugins to prevent conflicts.

 

Keep multi-line formatting for destructuring assignment

 

If you want to keep the multi-line formatting for destructuring assignments in your code, you can use the jsxBracketSameLine option in your Prettier configuration.

This option can be set to true to cause Prettier to keep the opening and closing brackets of a destructuring assignment on the same line, even if the assignment spans multiple lines. For example, given the following code:

const {
foo,
bar,
baz,
} = someObject;

Setting the jsxBracketSameLine option to true would cause Prettier to format the code as follows:

const { foo, bar, baz } = someObject;

To enable this option in your Prettier configuration, you can add the following line to your configuration file:

{
"jsxBracketSameLine": true
}

Alternatively, you can pass this option to Prettier on the command line using the --jsxBracketSameLine flag. For example:

prettier --jsxBracketSameLine true file.js

 

Add an option to prefer void tags over self closing tags.

 

By default, Prettier will use self-closing tags for HTML, XML, and JSX elements that do not have any content. For example, given the following code:

<div></div>

Prettier will format the code as follows:

<div />

If you want to prefer void tags (tags that do not have a closing tag) over self-closing tags, you can use the jsxSelfClosingTag option in your Prettier configuration. This option can be set to 'never' to cause Prettier to always use void tags for elements that do not have any content.

For example, given the following code:

<div></div>

Setting the jsxSelfClosingTag option to 'never' would cause Prettier to format the code as follows:

<div>

To enable this option in your Prettier configuration, you can add the following line to your configuration file:

{
  "jsxSelfClosingTag": "never"
}

Alternatively, you can pass this option to Prettier on the command line using the --jsxSelfClosingTag flag. For example:

prettier --jsxSelfClosingTag never file.js

 

[CSS] single line property formatting

 

Prettier is a code formatter that can be used to automatically format your CSS code in a consistent style. By default, Prettier will format CSS property declarations as follows:

.foo {
  color: red;
}

If you want to format CSS property declarations as a single line, you can use the css.singleLine option in your Prettier configuration. This option can be set to true to cause Prettier to format CSS property declarations as a single line, regardless of the number of properties or the length of the declarations.

For example, given the following code:

.foo {
  color: red;
  background-color: blue;
}

Setting the css.singleLine option to true would cause Prettier to format the code as follows:

.foo { color: red; background-color: blue; }

To enable this option in your Prettier configuration, you can add the following line to your configuration file:

{
  "css.singleLine": true
}

Alternatively, you can pass this option to Prettier on the command line using the --css.singleLine flag. For example:

prettier --css.singleLine true file.cs
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.