In PhpStorm 2016.3.2, if you open a .scss file, a file watcher will be added with default settings:
How can I modify these settings global?
If I start a new project, the file watcher will be added with the new modified settings?
All file watchers are configured on project level, there is no way to modify watchers globally. However you can use export/import functionality to export your watcher settings (see 'Import' and 'Export' buttons in Settings | Tools | File Watchers)
Related feature requests: WEB-8414, WEB-12478.
Related
I can't get WebStorm's SCSS file watcher to compile the Bootstrap SCSS files.
I have downloaded sass-dart for Windows and have tried pointing WebStorm's file watcher to dart-sass\sass.bat and dart-sass\src\dart.exe
The file watcher is enabled, it's not the common issue I've seen in other questions here where the file watcher keeps disabling itself.
Here is the file watcher setup I am using in WebStorm:
When I use dart-sass\src\dart.exe the result is:
Could not load "bootstrap-grid.scss:bootstrap-grid.css": Unknown scheme (bootstrap-grid.scss) for bootstrap-grid.scss:bootstrap-grid.css
null
and when I use dart-sass\sass.bat the result is:
Error reading bootstrap-grid.scss:bootstrap-grid.css: Cannot open file.
Obviously I'd prefer it to run with no errors and spit out correctly compiled CSS files!
Works fine for me using similar watcher setup. What Working directory: did you specify for your file watcher? Please make sure that it's set to $FileDir$:
I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;
I use IntelliJ with the Golang plugin. Is it possible to configure the IDE to execute gofmt on file save?
Of course you can.
install File Watchers plugin
open "Preferences->Tools->File Watchers" & Add a new watcher
set File Type: Go, Program: the abosolute path of gofmt, Arguments: -w $FilePath$
click OK
Gogland EAP 16 deprecated the On Save actions and replaced them with the File Watchers plugin.
If you have previously configured On Save actions, the IDE will prompt you to install the plugin and configure everything automatically. If you want to set it up from scratch yourself, check if you have File Watchers plugin and if not install it.
Enable gofmt:
Go to Settings | Tools | File Watchers.
Click the + button and select go fmt.
The default values are good.
In Advance Options select:
Auto-save edited files to trigger the watcher
Trigger the watcher on external changes
Click ok!
You can do the same for goimports and gometalinter.
If you are using Gogland, you have an option On Save under Preferences
Updated:
For new versions of the Goland:
open File->Settings->Tools->File Watchers
click on + button and choose go fmt
press Ok
Done :)
September 2021 Update.
If you are using GoLand with the 2021.2 version and higher (July 2021), there are a few options to enable gofmt on save besides File Watchers.
Enable Run gofmt on code reformat under Preferences/Settings | Editor | Code Style | Go | Other.
Enable Reformat code under Preferences/Settings | Tools | Actions on Save.
Press Command + S on macOS or Ctrl + S on Windows/Linux to save your changes.
I use SCSS file watcher in PhpStorm 9 and would like to disable source maps generation (.map files). How to configure a watcher for this?
if you've followed jetbrain's tutorial on how to work with sass/scss,
you probably installed ruby-sass (there's also node-sass).
any way phpstorm lets you define arguments when you setup a new watcher (settings->tools->file-watchers).
add the --no-source-map flag and it'll prevent sourcemap generation.
Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.