This is specific question about .js files. Not .ts files. With ts files i'm able to get it all working properly.
I made all the setup options for js files and it still doesn't work, if at all possible:
jsconfig.json in project root:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"removeComments": true,
"pretty": true,
"allowSyntheticDefaultImports": true // false doesn't change anything
},
"files": [
"typings/index.d.ts"
]
}
I also installed typings for node, and all express standard typings.
Yet, on my app.js file:
import * as express from "foo"
var app = exfprdess();
doesn't trigger any underlined error. How to get proper behavior ?
Visual Studio Code, by default, doesn't lint your code (meaning it doesn't check for errors).
Visual Studio Code can, however, lint your code, you'll just have to configure something like ESLint or JSLint.
Related
I am using "MongoDB for VS Code" extension for scripting and running mongodb scripts. I used to format the script code by changing language to javascript and then format and then reverting file language to MongoDB to work. Can someone please let me know how can I associate JavaScript formatter to mongodb file extension without loosing the language support for mongodb.
Came across this same problem this morning, as I started developing Atlas Functions & Aggregation Pipelines but wanted to test them quickly in my local playgrounds. This is what I came up with.
My quick config which enables Prettier and ESLint for MongoDB Playgrounds in VSCode, whilst keeping the Intellisense and MongoDB Playground syntax highlighting.
This requires the following VSCode extensions:
MongoDB for VS Code
ESLint
Prettier
Once the extensions are installed I configured a simple Node project loosely following Add Eslint, Prettier, and Airbnb Style Guide to Your Project, adding the AirBnB styles.
npm init -y
npm i eslint-plugin-import eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier -D
npx eslint --init
I use .eslint.json for configuration which I updated as follows
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"overrides": [
{
"files": ["**/*.js", "**/*.mongodb"]
}
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"ignorePatterns": ["node_modules/"],
"plugins": ["prettier"],
"rules": {
"no-console": "off",
"prettier/prettier": "warn"
}
}
Notice in the overrides section I have added **/*.mongodb to the files array. Which will allow ESLint to recognize .mongodb files and parse them as well.
Next I added .prettierrc which also includes *.mongodb in override files arrays.
{
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"singleAttributePerLine": true,
"overrides": [
{
"files": "*.mongodb",
"options": {
"parser": "flow"
}
}
]
}
All this config actually has an added bonus, in that in package.json I have defined the following scripts.
"scripts": {
"lint:check": "eslint ./",
"lint:fix": "eslint --fix ./",
"style:check": "prettier --check ./",
"style:fix": "prettier --write ./",
"mongo:check": "prettier --check '**/*.mongodb'",
"mongo:fix": "prettier --write '**/*.mongodb'",
}
I can run these from command line, and they can also be used with pre-commit hooks.
Coming back to VSCode Config, there are a few settings that I added. For prettier there is a setting called prettier.documentSelectors and for ESLint there are eslint.validate and eslint.probe.
"prettier.documentSelectors": ["**/*.mongodb"],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"mongodb"
],
"eslint.validate": ["mongodb"],
Best to add the above settings into the user settings, although the seem to work even when added to the workspace settings (.vscode/settings.json).
After applying all these I now have ESLint linting the *.mongodb files and Prettier formatting them as well on save.
Here is the repo with the config.
Sometimes when I startup VSCode and I save an JS file, everything gets messed up.
example
From:
To:
On save
What I found out:
When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.
Possible related environment details
// Part of .eslintrc
{
parser: 'babel-eslint',
extends: ['airbnb', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
}
...
}
// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always
// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false
// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",
VSCode Extension suspects:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
If any other (debugging) information needs to be provided, please shoot.
For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.
The solution was to prevent Beautify from formatting Javascript files.
In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):
"beautify.ignore": [
"**/*.js"
]
I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.
ESLint and Prettier are installed globally on my machine.
I am using these extensions:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
My .eslintrc.json file looks like this:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-console": "off"
}
}
In your VS Code, please go to Preference > Settings > User Settings and add the following lines:
"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true
I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.
Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.
When using VSCode, Prettier and ESLint the same time you may have different conflicting rules.
Setting rules manually in VSCode and ESLint may have no effect, but try to do that first. Also, Prettier settings may be saved in its own config file - .prettierrc or some like that.
If no effect, then check these:
In dev dependencies is proper version installed [eslint-config-prettier][1]
If you've used React/Vue/other-3d-party tool or source, you have to check that you're use NOT #vue/eslint-config-prettier version (see package.json and lock files)
In eslintrc file there is extends: ['prettier']. Same as the previous check there no library depended version specified.
I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.
The issue for me is that I had both Prettier and JS-CSS-HTML-formatter installed in VS Code. As soon as I uninstalled JS-CSS-HTML-formatter the issue went away.
I had the same issue. I uninstalled the extension and it solved the problem.
I am working with es6 syntax in Visual Studio Code and when I import ordinary file, then I can click F12 (Go to definition) and it works just fine. The problem is that with components (import from .jsx files) it does not work at all (nothing happens when you click go to definition). Has anyone an idea how it can be fixed?
P.S. I have jsconfig.json like that to allow proper go to definition for ordinary .js files:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules"
]
}
Although you can track down the solution from github issues mentioned in one of the comments, I wanted to make it easier for SO users. Quote from the Github issues page:
easy workaround is to add the compilerOption "jsx": "preserve" (or
"jsx": "react" or "jsx": "react-native")
jsconfig.json:
{
"compilerOptions": {
"jsx": "react"
}
}
I have a very simple 'jsconfig.json' to provide intellisense to my *.js and *.html (<script>) files.
The ES6 part from 'common.js' works ok, but the code inside "script1.js", "lib/lib1.js" are not recognized by the editor.
It seems that intellisense is not enabled for scripts inside html? Is there any way to check/resolve this?
Here is a copy of my jsconfig.json
{
"compilerOptions":
{
"target": "es6",
"module": "commonjs",
"experimentalDecorators" : true,
"allowSyntheticDefaultImports": true
},
"files": [ "script1.js", "lib/lib1.js" ],
"exclude": [ "node_modules" ]
}
External file intellisense in html script blocks is not supported in VSCode 1.14. We are tracking the feature request here: https://github.com/Microsoft/vscode/issues/26338
import {Mongo} from 'meteor/mongo';
export let Products = new Mongo.Collection('products');
above code is that I've written in my sample project. When I try to run this sample project, It throws error
There is already a collection named "products"
I've tried meteor reset. still I am facing same issue. I googled but got no proper solution. can anyone help me out?
I had the same issue the last days. I solved it using this part of my tsconfig.json
"atom": {
"rewriteTsconfig": true
},
"compileOnSave": false,
"buildOnSave": false,
"compilerOptions": {
"experimentalDecorators": true,
"module": "commonjs",
"target": "es5",
"isolatedModules": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"removeComments": false,
"noImplicitAny": false,
"sourceMap": true
},
"filesGlob": ...
And i also deleted all .js and .js.map files from my working directory. As #KRONWALLED already mentioned, the problem is occuring when you use an IDE which is auto compiling your .ts files. When you are using the atom-typescript package it could be that this is autocompiling your .ts files. That's why you get this error. The important line in the tsconfig.json file is
"compileOnSave": false,
Here we declare that our compiler should not compile the file on save. Only when meteor is running, then the files get compiled with meteor.
I hope this will help you.