TSLint inline rules stop working in VS Code - visual-studio-code

I have a setup VS Code + TSLint extension on my work and it works perfectly.
No i work from home, did the same setup, but found that inline rules stop working at home setup, for example TS Lint says me that i should use self-closed tag for <script>, i want to ignore it and add // tslint:disable-next-line: jsx-self-close, but as you can see on screen shot the warning with underline still exists:
This also true for any other inline rules.
Since i have "source.fixAll.tslint": true in vs code settings.json it always fix it in unwanted way for me.
I try to googled about it but can't find similar issues
Also here is my tsconfig.json file:
{
"compilerOptions": {
"noEmit": false,
"sourceMap": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"strict": false,
"module": "commonjs",
"allowJs": true,
"target": "esnext",
"esModuleInterop": true,
"jsx": "react",
"typeRoots": [
"./src/typings",
"./node_modules/#types"
]
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules",
"./src/public"
]
}


The placement of comment was wrong, the correct placement is:
// tslint:disable: jsx-self-close
export const AmpAnalytics = React.memo(() => (
<amp-analytics type="googleanalytics">
<script
type="application/json"
dangerouslySetInnerHTML={{ __html: json }}
>
</script>
</amp-analytics>
));

Related

VS Code showing eslint error but vitest is working. 'vi' is not defined

I have a tsconfig file like this
{
"include": ["tests/**/*.ts"],
"exclude": [],
"compilerOptions": {
"composite": true,
"lib": [],
"skipLibCheck": true,
"outDir": "lib",
"types": ["vitest/globals"]
}
}
as I have defined types for vitest/globals so yarn vitest cmd is working fine and executing the tests cases as well. But in the VS Code its showing me error
How I can fix/silent it in vs-code?

I had to add the following to my .eslintrc.json file to fix this issue in a test setup module:
"globals": {
"vi": true
},
However if you're using TypeScript, you should also add this to your compilerOptions in your tsconfig.json:
"types": ["vitest/globals"]
edit: you already had this in your tsconfig.json but I'll leave it in here anyway in case it helps someone

Strange behavior with TypeScript ambient declarations in VSCode

I have always been using a file interfaces.d.ts to add custom type helpers into it and suddenly in a new project I am getting this weird stuff.
As soon as I close the file, the typings get lost. When I reopen it, the typings are back.
Moreover, when I move the file from src/interfaces.d.ts to interfaces.d.ts, the file gets automatically added to tsconfig.json include field. However, it does not work when it is added there, removing it makes the typings available, but the above issue takes place later.
What is going on and how can I fix that?
Why does it work in my other projects?
The other project's tsconfig.json with typings located at src/interfaces.d.ts:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"downlevelIteration": true,
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}

ESLint rule conflicts with Prettier rule

I am totally new to VSCode and this is my first setting. I know that this is a very common problem but I couldn't find a suitable solution for it.
This is my understanding so far. Please correct me if I am wrong.
I want to use ESLint for finding errors in Javascript code and Prettier for formatting all languges. But it seems that we could also format our javascript code with ESLint! There are some useful rules that I like to use it and it seems Prettier don't have those like ( space-in-parens ).
So I decided to use ESLint as my formatter in Javascript. Now I can see that there are a lot of tutorial for "How to integrates ESLint with Prettier" in web. The idea is to extend Prettier rules with a plugin and add those ESLint specific rules to it. Reasonable!
I ended up with the following settings. Please take a look at my settings for using ESLint and Prettier below:
my eslint config file:
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ["prettier"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: [
"prettier"
],
"rules": {
"space-in-parens": ["error", "always"],
"quotes": ["error", "single"],
"prettier/prettier": "error"
}
};
my user setting file:
{
"terminal.integrated.shellArgs.linux": [
"-l"
],
"remote.SSH.remotePlatform": {
"dev-all": "linux"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript"
]
}
and finally my package.json file:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.4"
}
}
Now the problem is that whenever I save my javascript code, formatting toggles! for example with the first save, I have "single quote" and with the next save I have "double quote". I thinks my understanding of the whole idea is wrong. Could you explain it for me and tell me how to correct it. I am spending so much time to figure it. By the way, I have also installed two extensions in vscode: "ESLint" and "Prettier".

This is potentially because of conflicting rules between ESLint and Prettier plugins. Now you have two options
Either let ESLint know that you want to use Prettier as a formatter.
https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi
2.You can configure ESlint and Prettier together and resolve the conflicting
rules without any conflicts.
https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/

I have decided to let ESLint do formatting for me in JavaScript and prettier for all other languages. You could find my setting on my git.

To solve conflict
install eslint configuration for prettier
npm install eslint-config-prettier
And include it in the extends option in the file .eslintrc.js
extends: [
...,
"prettier",
],

You can follow these settings by Sumit Saha. Your conflicting will be gone. These settings give more power to eslint over prettier. I am copy-pasting those.
In the .vscode/settings.json file :
{
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
And, in the .eslintrc file:
{
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"react/react-in-jsx-scope": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": 0,
"react/state-in-constructor": 0,
"indent": 0,
"linebreak-style": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}
]
},
"plugins": ["prettier", "react", "react-hooks"]
}

Well, I am happy with TSLint along with ESLint.
And I have a habit of doing Ctrl+Shift+F often during writing code.
Also, you can try indent-rainbow, bracket pair colorizer and my favourite, peacock.

ionic 2 with netbeans keeps showing errors

This might be a superuser question, apologizes if it is.
I keep getting a few errors in netbeans (my IDE) which uses typescript and angular2 plugins
The errors I'm getting:
"Experimental support for decorators is a feature...."
and
"Cannot find name 'Promise'"
Even though i get these errors, everything works fine. So I'm just looking for a way to remove them showing up, I've read a bit about some ts.config, but I can't find that file..
My project structure looks like this:
I've found the ts.config
It was just not an "important file" I guess ;-)
Though it seems to have no effect:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}

There is currently No solution to the problem with netbeans plugins.
I've changed to Visual Studio Code, which offers a good typescript compiler.

How to fix "cannot compile modules unless the --module flag is provided" in VS Code?

according to this Cannot compile modules unless the '--module' flag is provided
in Visal Studio 2015 its a bug, but i am in the last Visual Studio Code, and i already create the file tscondif.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"out": "../../built/local/tsc.js",
"sourceMap": true
},
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"emitter.ts",
"program.ts",
"commandLineParser.ts",
"tsc.ts",
"diagnosticInformationMap.generated.ts"
]
}
but i still have many errors related to modules compilation and decorators,
how to fix it?