I use VSCode as an IDE for Babylon.js. To show Babylon.js code hinting, I was recommended to use "babylon.d.ts" file as the value of the "typescript.npm" in the VSCode's User Settings.
But when I hovered over a property in my JS script, a warning came up:
Could not install typings files for JavaScript language features.
Please ensure that NPM is installed or configure 'typescript.npm'
in your user settings.
How to fix this error and show the code hinting for Babylon.js JS script on VSCode?
to get babylon.js typings, just drop the babylon.d.ts file in your folder.
The file will be used by VSCode compiler directly
Related
We have using #vscode/webview-ui-toolkit and it works when we are testing. But we set up the webpack version of the extension. When we package and run the extension, we are missing the toolkit and our other files. Errors like
Error: Unable to read file '/Users/jkh/.vscode/extensions/ext-0.0.2/node_modules/#vscode/webview-ui-toolkit/dist/toolkit.js' (Error: Unable to resolve nonexistent file '/Users/jkh/.vscode/extensions/ext-0.0.2/node_modules/#vscode/webview-ui-toolkit/dist/toolkit.js')
and also the webpage src/newExtensionWizard/main.js and css src/newExtensionWizard/style.css.
Am I right that this is an issue with our webpack? Or why can we get webview-ui-toolkit to work under development but not through the vsix file?
When I save a file, I would like to run eslint, and have it fix any issues that eslint can fix.
I know this can be accomplished using the command line by running applying the --fix argument.
I also know that Intellij-IDEA has integration with Eslint directly; however, Intellij-IDEA uses stdin for it's integration which means you can't pass --fix as an argument.
With a few quick steps you can setup a file watcher that will run eslint --fix on the files you save.
Step by step:
Install the File Watcher plugin
Navigate to Preferences > Tools > File Watchers and create a new File Watcher
Choose File type: JavaScript
Optionally, apply a scope for the watcher. For example, I chose $ProjectFileDir$/apps/web/src/ and included all of it's contents recursively.
Choose the program to run. With node, npm, and eslint installed point to the eslint bin. In my project, the path was $ProjectFileDir$/apps/web/node_modules/eslint/bin/eslint.js
Apply the following arguments to run eslint with the fix option on the file that was saved --fix $FileName$
Specify the working directory as $FileDir$.
Name, and save the File Watcher. Then, edit a JavaScript file in the directory you scoped and watch many of your errors and warnings go away! Thanks Eslint!
Note: If you find Intellij-IDEA asking if you want to load file changes without you saving know (which gets annoying) it's because the IDE is saving in the background. You can uncheck Immediate file synchronization to have a better editing experience.
Things have changed. You won't need external plugins. There is now native support for ESlint:
Old (Deprecated):
ESlint Plugin: https://plugins.jetbrains.com/plugin/7494-eslint/
As of Intellij 14, a plugin based on this one was bundled into the IDE release by Jetbrains. What's the diffrence? This plugin supports Intellij 13 and other versions, --fix option, quick fixes and other minor differences. Please make sure you are referring to this one before opening an issue.
source: https://github.com/idok/eslint-plugin
New (Native support)
1. "Automatic ESLint configuration"
The "Automatic ESLint configuration" option works fine for me, too. The IDE scans for package.json files with eslint dependencies and run it. (You could use different ESLint versions in one project).
ESLint config is auto detected from the nearest .eslintrc.x (e.g. .json) config file, or read from the package.json
By default, PhpStorm uses the ESLint package from the project node_modules folder and the .eslintrc.* configuration file from the folder where the current file is stored. If no .eslintrc.* is found in the current file folder, PhpStorm will look for one in its parent folders up to the project root.
If you have several package.json files with ESLint listed as a dependency, PhpStorm starts a separate process for each package.json and processes everything below it. This lets you apply a specific ESLint version or a specific set of plugins to each path in a monorepo or a project with multiple ESLint configurations.
2. Manual ESLint configuration
You can also set the Node interpreter + ESLint package + .eslintrc config manually
Apply ESLint Code Style Rules
You can auto-import some code style rules from your ESLint config:
Inside your .eslintrc config file context menu
Select "Apply ESLint Code Style Rules"
Check output in "Event Log" panel
Configure Inspections
From "Warnings" tooltip select "Configure Inspections..."
Activate "ESLint" under "Code quality tools"
The "Problems" panel now lists ESLint issues AND (default) IDE problems
You might want to disable IDEs default rules by and replace them with adequate ESLint rules. Otherwise you might see 2 problems for the same issue in the list.
View Inspection Results
"Code" > "Run Inspection by Name..." > type "eslint"
You can "auto fix" problems, or fix the entire file (if rule can be fixed automatically)
Fixed problems are highlighted
Run/Debug Configuration [optional]
Alternative, you can set up a NPM script run configuration:
After ESLint installation, add a script section to package.json
"scripts": {
"eslint": "eslint"
}
In "npm" panel, you should see the "eslint" script from your package.json.
You can edit its settings to e.g. run ESLint for current file only:
Now you can run the NPM script:
Source: https://www.jetbrains.com/help/phpstorm/2020.2/eslint.html?utm_campaign=PS&utm_medium=link&utm_source=product&utm_content=2020.2#ws_js_eslint_activate
You better use the original third-party ESLint plugin, it does support quick fixes. See project README for details.
You can use a Save Actions Plugin
Installation
IDE (recommended) Install it from your IDE (Intellij IDEA, PyCharm, etc.):
"File > Settings > Plugins > Browse repositories... > Search 'Save
Actions' > Category 'Code tools'"
JetBrains plugin repository All versions of the plugin are available from the JetBrains plugin repository. You can download the
jar and add it to your IDE (you won't get updates thought):
"File > Settings > Plugins > Install plugin from disk..."
One of the options is "Reformat file" -> Enable / disable formatting (configured in "File > Settings > Code Style"). See "Reformat only changed code" for more options
in my case is my project was created by vue-cli
add this line to your package.json
"lintfix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",
here are 3 ways you can do
Click on the green arrow on the left side
Click on run button as the image below
In terminal run: npm run lintfix
that all.
Recently my client switched from Eclipse to Intellij. In both IDEs I was editing SCSS files externally and running "compass watch" in terminal. This worked great in Eclipse. immediately after compiling SCSS file I was able to simply refresh browser and see the changes.
In Intellij it takes up to 30 seconds to see the changes, or if I enable "synchronize files on frame activation" I have to switch to browser first, then back to Intellij, and then back again to browser in order to force refresh. Third option is to manually sync "css" folder, which is not convenient. I had a same issue when I was editing and compiling SCSS files in Intellij.
How can I force Intellij to detect CSS file change faster?
I've found the solution.
Open "Settings / File Watchers" and go to SCSS. Make sure that field "Output paths to refresh" has the same value for the output as "Arguments" field.
For example, this is my setup:
Arguments:
--no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css
Output paths to refresh:
$FileParentDir$\css\$FileNameWithoutExtension$.css
I installed Sublime Text 2 and Node.js.After that i install less with that command npm install -g less with command console.When i install Less2CSS plugin and try to compile less file then i am getting error The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css.I found the same issue on here also.But i didn't understand what and which file to change.please help me if anyone have same issue.I attached the screen shot for more understand the issue.Thank you everyone.
To fix this issue, go to Sublime Text and:
Go to Preferences > Browse Packages
Open the Less2css folder
Open the lesscompiler.py file in a text editor
Go to line 184 and change this
cmd = [lessc_command, less, css, "-x", "--verbose"]
to this
cmd = [lessc_command, less, css, "--clean-css", "--verbose"]
Save the file, restart Sublime Text, and attempt to save your LESS file again.
It means that the option is not supported. it recommend you use a dedicated css minifier.
You can change the option.
Via "Preferences" -> "Package Settings" -> "Less2Css" -> "Settings - Default".
change ["minify": true,] to ["minify": false,]
and then, if you want to minify the css file, please use a dedicated css minifier to do this.
I want a file watcher for LiveScript, so I installed it with npm install LiveScript -g and this works like expected. I can now type livescript into cmd and compile files.
But when I try to use livescript as Program in a watcher, WebStorm tells me Cannot run program "livescript"...
The command seems to be globally accessible, but somehow not for WebStorm.
Please provide a full path to livescript.cmd (should be something like 'C:\Users\your.name\AppData\Roaming\npm\livescript.cmd') in a Program field - this should help