I'm using VSCode with prettier plugin and typescript and also tslint.
Leaving aside the convenience to use this configuration, I get a
[tslint] Exceeds maximum line length of 120 (max-line-length)
For a line like this:
import { MyComponent } from "../../some_very_long_path";
I've prettier configured with a print-width of 100, so I was expecting that on Format Document this line would be refactored into something like this:
import { MyComponent }
from "../../some_very_long_path";
or like this:
import {
MyComponent
} from "../../some_very_long_path";
But it is not. Any ideas why?
The documentation says printWidth. The documentation link is here
printWidth: 120
Probably this should solve the problem.
You can add exception for specific regex.
Prettier will have the lead for managing imports and exports, since it has a special way to deal with them.
// edit your tslint.json
"max-line-length": [
true,
{
"limit": 140,
"ignore-pattern": "^import |^export {(.*?)}"
}
],
Prettier is not breaking down imports and the best thing you can do is to remove all the stylistic errors (including the max-line-length) from tslint rules and let Prettier to handle those and tslint the code related ones.
Related
In my code I have things like this:
import Something from './Something';
And I would like to normalize it to this:
import Something from './Something';
However, my keyword-spacing rule, although it applies to everything else, doesn't seem to apply to import statements:
'keyword-spacing': ['error', { 'before': true, 'after': true }],
Do I need to use a different rule for this and, if so, which one?
I use ESLint rule no-multi-spaces for the spacing.
"no-multi-spaces": ["error"]
Lots of logging is very helpful to me.
However, sometimes I would like to temporarily reduce the clutter of code that I'm editing in VSC by hiding, collapsing, or reducing the opacity of the font of console.log, console.warn, and console.error lines in javascript, Vue, React, etc.
How could I accomplish my goal?
I'd love if there were some way to easily toggle the feature on/off.
Thank you so much to #rioV8, who pointed me to the answer.
This seems to work for me when using extension Highlight:
"highlight.regexes": {
"(console\\.(log|warn|error)\\(.+\\)[;]?)": {
"regexFlags": "g",
"decorations": [
{ "opacity": "0.1" }
]
}
}
To determine what regular expression I wanted to use, I wrote these test cases in https://www.regexpal.com:
console.log('asdfdsf')
console.log({some})
console.log({some});
console.error('error', msg);
console.warn('careful', thing)
And (console\.(log|warn|error)\(.+\)[;]?) worked. Then I needed to add an extra \ before each \ to satisfy the VSC settings JSON file.
Now my VSC looks like this:
I'm working with VSCode, Prettier and TSLint.
When I do have chained functions call with more than 2 calls like
let m = moment().startOf("day").subtract(30, "days");
Prettier breaks into
let m = moment()
.startOf("day")
.subtract(30, "days")
I already set the TSLint rule
{
"defaultSeverity": "warning",
"extends": ["tslint:recommended"],
"linterOptions": {
"exclude": ["node_modules/**"]
},
"rules": {
// ...
"newline-per-chained-call": false
}
}
and the fallowing settings
"prettier.tslintIntegration": true
But the chained functions still breking into new lines.
What can I do to avoid the line breaking but still using the TSLint?
[EDIT] In Prettier v2.0.4 this issue is fixed. Update to latest version
This is an issue in prettier. The PR's to add this feature has not yet been merged from what i understand.
Currently to get what you want, what i can suggest is to ignore the next node in the abstract syntax tree from formatting using the // prettier-ignore comments.
// prettier-ignore
let m = moment().startOf("day").subtract(30, "days");
There are variations of these ignore statements, like one could ignore within a ranger or one could even ignore a particular file too. Do check out the official prettier documentations to know more of it's implementation.
Note that in Prettier v2.0.4 this issue is fixed. Now, as long as your line of code is within the length specified in your config or the default 80, it will be left in one line. Otherwise, it will be wrapped to multiple lines.
I had to upgrade my prettier in order for these changes to be put into affect.
$ yarn upgrade -g prettier --latest
Thanks. What are the default formatting rules being used for TypeScript?
I'm working from a template setup with TSLint.
VSC inserts a space before : on variable type declarations.
My TSLint complains that I have a space a before : and I don't want the space there.
(snapshot : any) => { ... }
My TSLint config (and I) want it to be the following form
(snapshot : any) => { ... }
How can I make VSC behave on auto-save adhering to my TSLint formatting rules? I've also tried using the Prettier extension, but now have it disabled as I tried to figure out what was going on. Any suggestions greatly appreciated. Thanks.
I have project structure like this
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And I'm trying to do stuff below in app.component-index.ts
import { HomeComponent } from 'components/home.component'
Typescript couldn't find this module and throws
error TS2307: Cannot find module 'home.component'
Typescript docs say next:
A non-relative import to moduleB such as import { b } from "moduleB",
in a source file /root/src/folder/A.ts, would result in attempting the
following locations for locating "moduleB":
/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts
So for my case I expect it would be like
/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component
Thanks in advance.
P.S. In my webpack.config I've setted root.resolve to src and everything bundles correct. Typescript-loader prints errors to terminal but everything is bundled and works correctly
So I can guess at the "why" portion of this but I'm relatively new to TypeScript. I have gotten this to work though so I'll try explaining based on that solution as best I can.
What you expect based on the TypeScript Docs would be mostly correct if:
'components/home.component'
were treated as a 'Non-relative import'. I'm fairly certain (based on the solution that worked for me) that TypeScript treats it as an absolute path from the 'compilerOptions.baseUrl' field in your tsconfig.json.
What worked for me was to set it like so:
{
"compilerOptions": {
"baseUrl": ".",
// Other options
}
}
Which essentially tells TypeScript to try and find something like
'components/home.component'
by looking in the same directory as the tsconfig.json file for a directory called 'components' and then to look for a file/directory within it called 'home.component'.
So if your structure looks like:
|--src
|--app.component
|--index.ts
|--home.component
|--index.ts
|--tsconfig.json
|--webpack.config.js
And you set baseUrl to "." you would probably need to format your import like
import { HomeComponent } from 'src/home.component'