I am using Dart and Node.js. I tried to auto format Node.js with Prettier. However, VSCode auto formats Dart file but it does not format JavaScript with Prettier.
Under the screen, it says Prettier on JavaScript. When I touch the setting and set it to Prettier for auto format, Prettier works and it auto format JS files but Dart auto format does not work.
How can I set VSCode to auto format Dart and JS files without switching settings everytime?
VSCode Setup
{
"workbench.colorTheme": "Visual Studio Dark",
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"workbench.preferredHighContrastColorTheme": "Default Dark+",
"files.autoSave": "afterDelay",
"editor.minimap.enabled": false,
"dart.openDevTools": "flutter",
"explorer.confirmDragAndDrop": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
!!!! Solution
"editor.defaultFormatter": "Dart-Code.dart-code",
You need to add this line to setting.json Dart part. And then set your default formatter to Prettier!
Don't set Prettier as VS Code's global default formatter. Set to only be the default formatter where Javascript is concerned. Open your settings JSON and add the following:
{
...
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
I took a combination of the answer and comments above and used it to solve the problem I had, which was Firebase Cloud Function JavaScript/Typescript and Flutter/Dart code in the same VSCode project.
Create a .vscode folder in the root of your project.
Create a settings.json file inside of it.
Add the following and tweak to your liking. In the main VSCode settings, you can find a cog in the left gutter next to each setting that has a "Copy setting to JSON" menu item, which you can then paste into the below and adjust to override the application-level settings.
Decide whether to .gitignore your new folder or share it with your team.
Restart VSCode
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[dart]": { "editor.defaultFormatter": "Dart-Code.dart-code" },
"editor.formatOnSave": true
}
Related
In my project (vite powered) I use aliases. I have configured it, and they work for build and jump in .ts.
I have problem when I try to jump in src/app.scss files.
// case 1: vite OK, vscode: Fail
#import '$bs/bootstrap';
// case 2: vite Fail, vscode OK
#import '~bootstrap/scss/bootstrap';
case 1
When I try to go through an alias to a file with Ctrl + Click, vscode doesn't find the file and asks if I want to create it.
case 2
For vscode there is an alias ~ on node_modules, but then you cannot compile the project in vite.
I tried
Vite + tsconfig.json
vite: {
resolve: {
alias: {
'$bs': path.resolve('./node_modules/bootstrap/scss'),
}
}
And in tsconfig.joson (and I create jsonfig.json):
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"],
"$bs/*": ["node_modules/bootstrap/scss/*"],
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
Couple vscode extensions:
"wudy.vs-alias-jump",
"paulgui.alias-jump",
"svelte.svelte-vscode",
"mariocadenas.alias-resolver"
"vs-alias-jump.alias": {
"$lib": "${folder}/src/lib",
"$bs": "${folder}/node_modules/bootstrap/scss",
},
"aliasJump.alias": {
"$bs": "/node_modules/bootstrap/scss",
},
"jumpToAliasFile.alias": {
"$bs": "D:/dev/node/layout-test/sveltekit-attractions-ui-test/node_modules/bootstrap/scss",
}
~~//edit 1~~
~~I found a working solution, but I'm not entirely happy with it.~~
Is it possible to somehow change the vscode resolver?
resolve.alias: {
'~bootstrap': path.resolve( './node_modules/bootstrap')
}
edit 2
I don't know what happen, but on other PC this don't works. (I saw some vite message about discovering new dependency and this starts work...)
So we are trying to configure NightWatch so that the resulting opened firefox browser window, comes pre-installed with a extension (MetaMask) - so that tests can use Metamask to test out simple wallet transactions.
I'm fairly certain this is possible using geckodriver.
Our current nightwatch.conf.js file is:
const pathToGeckoDriver = require('geckodriver').path;
module.exports = {
src_folders: ['src/tests'],
page_objects_path: ['src/pages'],
custom_commands_path: ['src/custom-commands'],
webdriver: {
start_process: true,
server_path: pathToGeckoDriver,
},
test_settings: {
default: {
launch_url: 'https://some-website.com',
end_session_on_fail: false,
desiredCapabilities: {
browserName: 'firefox',
acceptInsecureCerts: true,
javascriptEnabled: true,
firefoxOptions: {
args: ['-profile', 'nightwatch'], // tried making a "nightwatch" profile for firefox and setting this profile at startup. no luck. :(
add_extension: ['metamask-10.2.2-an+fx.xpi'], // tried various versions of this line, no luck. :(
},
},
},
},
};
We have downloaded the extension XPI file and placed it in the same dir as the nightwatch.conf.js file.
Has anyone managed to get geckodriver to boot with an extension installed via Nightwatch config?
I want to disable rule for all files inside nested directory. I found examples only for exact path or by file extension. But it is not what I want.
We use it for shared config and don't know where this directory will be. We have many of them.
I'm trying config like this:
{
overrides: [
{
files: [
'**/test/**/*',
],
rules: {
"import/no-extraneous-dependencies": "off"
}
},
],
}
But glob like **/test/**/* and many others didn't not work.
Can someone help to reach this goal?
The above code should work.
How were you testing this? If it's an extension like VSCode you may need to refresh things to see latest definitions loaded.
If you are using a eslint service like esprint you will also need to restart it to grab latest definitions.
Caching
Make sure that eslint is not configured to cache results to avoid having to cache bust when debugging things. eslint docs
Here's an example for a react-native app with multiple overrides
module.exports = {
...baseConfig,
overrides: [
typescriptOverrides,
e2eOverrides,
themeOverrides,
{
files: ['**/*.style.js'],
rules: {
'sort-keys': [
'error',
'asc',
{
caseSensitive: true,
natural: true,
},
],
},
},
{
files: ['**/*.test.js'],
rules: {
'arrow-body-style': 'off',
},
},
],
};
Debugging the glob matcher
Run eslint in debug mode and see all the files being run example DEBUG=eslint:cli-engine npx eslint src/**/*.test.js
You can test your glob patterns by running a ls command. Example: ls ./src/**/*.test.js will either return all the files or 'no matches found'.
I configure eslint in the editor, from the manual https://eslint.org/docs/user-guide/configuring#specifying-globals:
In my config, it looks like this:
"eslint.enable": true,
"eslint.options": {
"globals": {
"$": true,
"moment": true
},
...
With such settings, VS Code generates an error:
(options.globals || []).reduce is not a function
How to configure the global config of eslint in VS Code?
As it turned out, the solution was unexpected enough and found here https://github.com/eslint/eslint/pull/6922
Those.
It is suggested to replace the global settings object with an array, and now with this in mind, my config looks like this:
"eslint.enable": true,
"eslint.options": {
"globals": [
"$",
"moment"
],
...
I hope someone will reduce the time to find a solution to the problem.
OS: macOS Sierra 10.12.5 .
Sublime Text: Build 3126 .
jshint v2.9.5 .
eslint v4.4.0 .
I have installed below packages for linting the js file
sublimeLinter-contrib-eslint
sublimeLinter-jshint
In my each .js file, IIFE (function(){ has been written on the top of the file BUT linter gives below error in gutter
Incompatible values for "undefined" and "undefined" linting options.
I have both .jshintrc and .eslintrc file in my project root directory BUT I am a bit confused
1. Which linter throw this error? and
2. How to resolve/fix it?
-.jshintrc_
{
"node": true,
"esversion": 6,
"globals" : {
"moment": true,
"saveAs": true
}
}
.eslintrc
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"angular": true,
"module": true,
"inject": true,
"moment": true,
"saveAs": true,
"AWS": true,
"require": false
},
"rules": {
"indent": [0,"tab"],
"linebreak-style": [0, "unix"],
"semi": [2, "always"]
}
}
JS file
(function() {
'use strict';
angular.module().controller(function () { //....code.... });
})();
I have tried the rules as per eslint documentation
"rules": {
"wrap-iife": [2, "outside"]
}
tried all possible values but did not succeed.
Found solution by using Debug mode for sublimeLinter.
there are mixing of 2 .jshintrc files. one is the default ( which can be viewed by (context menu > JSHint > Set Linting Preferences ) and other is custom .jshintrc which located in my project root directory and also there are 2 property esnext and esversion written which I think is not valid. from this refrence
so first clear all comments from default .jshintrc (/Users//Library/Application Support/Sublime Text 3/Packages/JSHint Gutter/.jshintrc) and remove esversion property from custom .jshintrc file and everything is working fine now.