Expanding code lines beyond 80 characters in Visual Studio Code with TSLint integration

Question

Expanding code lines beyond 80 characters in Visual Studio Code with TSLint integration

I am utilizing TypeScript alongside TSLint and Prettier within Visual Studio Code for developing a React Native App.

Despite my efforts to set up my editor to automatically wrap the code per line at 100 characters, it consistently reverts back to 80 characters after saving.

Below are the modifications I made:

"prettier.tslintIntegration": true,
"prettier.printWidth": 100,
"editor.renderIndentGuides": true,
"editor.rulers": [100],
"editor.wordWrapColumn": 100,
"editor.formatOnSave": true

Additionally, here is my tslint.json configuration:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "rules": {
    // "jsx-no-lambda": false,
    "member-access": false,
    "interface-name": false,
    "max-line-length": [true, 100]
  }
}

Despite configuring everything as mentioned above, my code keeps wrapping around 80 characters. How can this be resolved?

If a line exceeds 100 characters, a linting error appears, indicating that the tslint.json setting is functioning properly.

As an additional note, below are the complete VSCode settings in case any elements were overlooked:

{
  "telemetry.enableTelemetry": false,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "window.zoomLevel": 0,
  "prettier.eslintIntegration": true,
  "prettier.tslintIntegration": true,
  "prettier.printWidth": 100,
  "editor.renderIndentGuides": true,
  "editor.rulers": [100],
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },
  "workbench.colorCustomizations": {
    // "statusBar.background": "#272b33",
    // "panel.background": "#30353f",
    // "sideBar.background": "#2a2b33",
    "editor.background": "#2c313a"
  },
  "todohighlight.keywords": [
    {
      "text": "DEBUG:",
      "color": "#fff",
      "backgroundColor": "limegreen",
      "overviewRulerColor": "grey"
    },
    {
      "text": "NOTE:",
      "color": "#fff",
      "backgroundColor": "mediumslateblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "REVIEW:",
      "color": "#fff",
      "backgroundColor": "dodgerblue",
      "overviewRulerColor": "grey"
    },
    {
      "text": "XXX:",
      "color": "#fff",
      "backgroundColor": "orangered",
      "overviewRulerColor": "grey"
    }
  ],
  "editor.wordWrapColumn": 100,
  "editor.formatOnSave": true
}

typescript visual-studio-code word-wrap tslint prettier

Answer 1

Answer №1

If you're looking to enable word wrapping in your code editor, consider these two settings:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 100

It appears that the setting "editor.wordWrap" may be missing from your configuration. In Visual Studio Code (vscode), this setting determines the wrapping policy: "wordWrapColumn" instructs it to wrap at the specified column defined by "editor.wordWrapColumn".

You could also experiment with "editor.wordWrap": "bounded", which will adhere to the "wordWrapColumn" value but also wrap based on the viewport width.

Update: Following our conversation in the comments, it seems that Prettier may not be respecting the "printWidth" settings for some reason. This could be due to one of the following:

A potential issue as outlined here: https://github.com/prettier/prettier-vscode/issues/595
The sequence in which configuration options are prioritized, detailed here: https://github.com/prettier/prettier-vscode#prettiers-settings. It looks for Prettier config files first, followed by .editorconfig files, and then vscode settings.

To address this, you might try explicitly defining this setting in either your project's Prettier config file or an .editorconfig file to see if the vscode plugin responds accordingly.

Answer 2

If you're looking to enable word wrapping in your code editor, consider these two settings:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 100

It appears that the setting "editor.wordWrap" may be missing from your configuration. In Visual Studio Code (vscode), this setting determines the wrapping policy: "wordWrapColumn" instructs it to wrap at the specified column defined by "editor.wordWrapColumn".

You could also experiment with "editor.wordWrap": "bounded", which will adhere to the "wordWrapColumn" value but also wrap based on the viewport width.

Update: Following our conversation in the comments, it seems that Prettier may not be respecting the "printWidth" settings for some reason. This could be due to one of the following:

A potential issue as outlined here: https://github.com/prettier/prettier-vscode/issues/595
The sequence in which configuration options are prioritized, detailed here: https://github.com/prettier/prettier-vscode#prettiers-settings. It looks for Prettier config files first, followed by .editorconfig files, and then vscode settings.

To address this, you might try explicitly defining this setting in either your project's Prettier config file or an .editorconfig file to see if the vscode plugin responds accordingly.

Answer 3

Answer №2

After some trial and error, I discovered a simple solution that worked perfectly for me. First, navigate to your settings and search for the parameter called Print Width. Adjust the value of Prettier: Print Width to fit your specific requirements - the default is 80, but I personally changed it to 150 with great success. Additionally, make sure to include the following lines in your settings.json file:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 150,
"prettier.printWidth": 150

https://i.sstatic.net/HjpLV.png

Answer 4

After some trial and error, I discovered a simple solution that worked perfectly for me. First, navigate to your settings and search for the parameter called Print Width. Adjust the value of Prettier: Print Width to fit your specific requirements - the default is 80, but I personally changed it to 150 with great success. Additionally, make sure to include the following lines in your settings.json file:

"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 150,
"prettier.printWidth": 150

https://i.sstatic.net/HjpLV.png

Answer 5

Answer №3

Locate the .prettierrc.js file in your project directory or create it if it doesn't exist, then include the printWidth parameter as demonstrated below

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 150, // <== add this
};

Learn more about configuration options here

Answer 6

Locate the .prettierrc.js file in your project directory or create it if it doesn't exist, then include the printWidth parameter as demonstrated below

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
  printWidth: 150, // <== add this
};

Learn more about configuration options here

Answer 7

Answer №4

After installing prettier, all I needed to do was add the following line to resolve the issue:

"prettier.printWidth": 120,

Typically, wrap lengths are set at either 80 or 120, but some prefer 150.

You can include the above settings in either of the following locations:

Project workspace settings:

.vscode\settings.json

User settings:

%UserProfile%\AppData\Roaming\Code\User\settings.json

The paths stated above are for Windows OS, but similar ones will apply to other operating systems as well.

Answer 8

After installing prettier, all I needed to do was add the following line to resolve the issue:

"prettier.printWidth": 120,

Typically, wrap lengths are set at either 80 or 120, but some prefer 150.

You can include the above settings in either of the following locations:

Project workspace settings:

.vscode\settings.json

User settings:

%UserProfile%\AppData\Roaming\Code\User\settings.json

The paths stated above are for Windows OS, but similar ones will apply to other operating systems as well.

Answer 9

Answer №5

To ensure proper formatting in your tslint.json file, consider including the printWidth option within the Prettier configuration section:

"rules": {
    "prettier": [
        true,
        {
            "printWidth": 100
        }
    ],

Don't forget to follow the advice of vaglignatev and install the tslint-config-prettier package.

Answer 10

To ensure proper formatting in your tslint.json file, consider including the printWidth option within the Prettier configuration section:

"rules": {
    "prettier": [
        true,
        {
            "printWidth": 100
        }
    ],

Don't forget to follow the advice of vaglignatev and install the tslint-config-prettier package.

Answer 11

Answer №6

Encountering a similar problem, I found that the .editorconfig file was taking precedence over my prettier settings. To resolve this, I simply included the line max_line_length = 100

Answer 12

Encountering a similar problem, I found that the .editorconfig file was taking precedence over my prettier settings. To resolve this, I simply included the line max_line_length = 100

Expanding code lines beyond 80 characters in Visual Studio Code with TSLint integration

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

When using Protractor with Typescript, you may encounter the error message "Failed: Cannot read property 'sendKeys' of undefined"

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

Using createContext in React.tsx to pass the state through useState

The production build is encountering an issue with a type error stating that the property 'companies' does not exist on the 'PrismaClient' type, while the local build is successful

Tips for accessing the return value from a method outside of its containing function

Transcompiling TypeScript for Node.js

Verify that each interface in an array includes all of its respective fields - Angular 8

Exploring a JSON Object in TypeScript: A Step-by-Step Guide

Exploring the Uses of SystemJS with TypeScript Loader

Unveiling the method of retrieving a targeted value from JWT in React

Issue with sx prop type error found in the TabPanel component of MUI v5

Out of nowhere, an error popped up indicating an undefined Python version in my Jupyter Notebook within Visual Studio Code

Attempting to simulate the behavior of Angular2 Token during testing

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

Integrating a cutting-edge feature into your Angular project

Guide on troubleshooting Node TypeScript in Visual Studio Code when the JavaScript source is stored in a separate directory

Invalid Type Property - Request and Response Express Types

How can we retrieve the target element for an 'onSelectionChange' DOM event in Angular 6?

Issue with module import in Next.js: "<module name>__WEBPACK_IMPORTED_MODULE_1___default(...).<function name>" Are We Making a Mistake?

When creating utility classes, is it beneficial to offer a non-mutable API to facilitate their integration with frameworks such as React?