I installed the IntelliJ Prettier plugin for web development. Unfortunately I was not able to specifiy a custom configuration, which consists of this line: "prettier.singleQuote": true.
What I tried:
Under Languages & Frameworks > JavaScript > Prettier I specified once the global and once the project specific prettier installation. (In the screenshot you'll see the global package).
Not regarding configuration file I tried creating a .prettierrc file in my projects' root where the package.json lies. The config file looks like this
.prettierrc
{
"prettier.printWidth": 5,
"prettier.trailingComma": "none",
"prettier.singleQuote": true
}
Since this didn't work I renamed it to .prettierrc.json which didn't work either. Then I tried to use the "prettier" tag in my projects' package.json like this:
"devDependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest-fetch-mock": "^1.5.0",
"jest-styled-components": "5.0.0",
"prettier": "^1.13.5",
"react-test-renderer": "^16.2.0"
},
"prettier": {
"prettier.singleQuote": true
},
Still when I format with CTRL+ALT+SHIFT+P it only applies the default configuration and not the provided one, thus replacing all existing single to double-quotes.
I also tried a few things mentioned here (IntelliJ Forum), which didn't work for me either. What am I missing? (Tried also a desperate IDEA restart ...)
I assume prettier is installed.
To configure prettier you have go > Settings > Tools > External Tools
Create prettier action, Follow screenshot for commands.
Follow below steps to apply prettier on js file
Open a file
Hit Ctrl+shift+a or Right click on file > External Tools > Prettier (action name)
Type your action name (prettier name which you given)
Hit Enter
please click here for more info on this.
https://intellij-support.jetbrains.com/hc/en-us/community/posts/360002745119-How-to-have-Reformat-Code-feature-behave-exactly-like-Prettier-
"You can re-import settings at any time using Apply Prettier Code Style Rules in the .prettierrc right-click menu:
"
Related
Setup: New vue-cli 3.0 project w/ Typescript, ESlint
Active plugins in VSCode: Vetur, Prettier
I checked all the settings I could find and experimented back and fro but couldn't solve the following issue:
Prettier formats the project's .ts files without any issues. In my .vue files Vetur uses prettyhtml for the template part which works fine too. For the script (lang="ts") part though, Vetur formats it based on some rules I cannot find anywhere - but definitely not Prettier/Prettier config. E.g. I changed singleQuotes = true and semi = false in my Prettier settings which works fine for my .ts files but within the script part in my .vue files it will just auto-format to double quotes and semi-colons.
Any idea why Vetur isn't relying on Prettier for the script part of .vue files? Also, where are the settings applied to that part (e.g. singleQuotes true/false)?
If I add a local .prettierrc file with { "singleQuote": true }, formatting will work as expected.
Another way to edit Prettier options for Vetur is by adding this to your VSCode settings.json:
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false
}
}
Installing Datatables, Editor and their options (Select, RowGroup etc.. ) can be quite tricky with the official npm installation. You have to install multiple dependencies, be cautious of the CSS versions you import and so on.
I had an hard time dealing with it so I share you a quite straightforward solution.
Datatables offers an excellent download option in the download builder, which allows you to the styling, packages and extensions you want and download them in a single folder.
So first of all:
pick the configuration you want and then download the files (with concatenate option).
Then :
Copy the Datatable package into some local directory.
Add a package.json file with the following
{ "name": "datatables-bundle",
"version": "1.10.16",
"description": "Datatables bundled",
"main": "datatables.js",
"author": {
"name": "SpryMedia Ltd",
"url": "http://datatables.net"
}
}
go to your project directory
Call npm install ../datatables-local-package-path.
Once this is done, I can require the bundled package with a single line:
window.dt = require('datatables-bundle');
for CSS :
//Datatables styles
#import "~datatables-bundle/datatables.min.css";
... and this works!
Editor and Tables are fully functional so are the options (select, RowGroup...).
It spares the difficulty of installing separately all the npm packages, the post install process (for Editor's licence) and so on.
Of course the package won't update by itself but this is a minor issue.
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.
I have a question regarding loading the dependencies using Bower.
I have bower.json like
{
"name": "My project",
"version": "0.1",
"dependencies": {
"angular": "~1.2.0",
"angular-bowser": "~0.0.1"
}
}
//I want to add alert.js dependency
I was hoping to add a custom bootstrap JS file that is only for alert. I am not sure how to add the custom file since I can't run bower install to install the custom file.
Any tips? Thanks a lot!
You add bootstrap as a Bower dependency. Then in whatever other tool you're using to either generate <script> tags or generate a single concatenated JS file, you add Bootstrap's alert.js (and any other Bootstrap jQuery plugins that Alert depends on) to the list of required JS files.
Speaking more generally, Bower is an pretty minimalistic package manager, to the point that it is arguably not very useful, as it provides relatively little metadata and leaves many issues to instead be dealt with by other tools or by the user manually. Hence, what you're asking for here goes beyond the realm of Bower itself.
I'm trying to refactor a library that uses Browserify by shimming certain modules out of the bundle using browserify-shim. Specifically, the library uses require("codemirror") but I want to provide a bundle that doesn't include CodeMirror but will rather use one that is provided via CDN.
So I've got browserify-shim config in my package.json like
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror"
}
So far so good. require('jquery') and require('codemirror') have disappeared from the browserified bundle and been replaced by the expected code snippet to grab jQuery and CodeMirror off of the window object.
The library also requires some CodeMirror add-ons. For example require('codemirror/addon/hint/show-hint.js'). That's fine. I want that add-on bundled. However, within this add-on is a UMD wrapper that includes require("../../lib/codemirror"). Browserify is seeing this and is bundling the CodeMirror from /node_modules/codemirror/lib/codemirror.js because of this (I think). I want this to use window.CodeMirror as defined in the codemirror shim instead, but cannot figure it out. Have tried many variations including the following:
"browserify-shim": {
"jquery": "global:jQuery",
"codemirror": "global:CodeMirror",
"../../lib/codemirror": "global:CodeMirror",
"codemirror/addon/hint/show-hint.js": {
"exports":null,
"depends":["../../lib/codemirror:CodeMirror"]
}
}
That require("../../lib/codemirror") will not go away! I'm sure I'm missing something.
I'm running this from a Gulp script, but I don't think that should make any difference. Browserify version 3.38.1. Browserify-shim version 3.7.0.
Any ideas?
If you add browserify-shim with {global: true}, it should be applied to your dependencies' dependencies (and so on) as well, which should hopefully do what you want.
Assuming you're using raw browserify in your Gulpfile, instead of:
b.transform('browserify-shim');
do:
b.transform({global: true}, 'browserify-shim');
If you're using gulp-browserify, I'm not sure whether there's any way to specify global transforms.
{global: true}
works for me... why is this not a default?