Related
I am installing Sublime Text 3.2.2 on macOS 10.13.6 (High Sierra) including the View-In-Browser plugin. Everything installs as expected using Package Control, but pressing any key combination fails to load the requested browser. There is no apparent effect at all. There are no error messages in the Console. It fills like the keyboard isn't being read, but other key combinations work.
View-In-Browser User key bindings are;
[
{ "keys": [ "alt+1" ], "command": "view_in_browser", "args": { "browser": "/firefox" } },
{ "keys": [ "alt+2" ], "command": "view-in-browser", "args": { "browser": "/chrome" } },
{ "keys": [ "alt+3" ], "command": "view-in-browser", "args": { "browser": "/safari" } },
{ "keys": [ "alt+4" ], "command": "view-in-browser", "args": { "browser": "/opera" } }
]
View-In-Browser package user settings are:
{
"posix": {
"darwin": {
"firefox": "open -a \"/Programs/Firefox.app\"",
"safari": "open -a \"/Applications/Safari.app\"",
"chrome": "open -a \"/Programs/Chrome.app\"",
"opera": "open -a \"/Programs/Opera.app\""
}
},
"browser": "firefox"
}
Things I have tried with no luck:
Read the code many times, but it always looks good to me. Maybe I have a blind-eye for some syntax error? Do these settings look OK?
Uninstalled and reinstalled the View-In-Browser plugin;
Uninstalled and reinstalled Firefox Developer Edition app;
Reviewed View-In-Browser's github change log for OS compatibility - no comments.
Uninstalled and manually reinstalled the View-In-Browser plugin;
Scanned StackOverflow Sublime-text-plugin for view-in-browser
Are there any known conflicts between View-In-Browser and other plugin packages? Any ideas of other ways to debug the issue?
The paths to the browsers are wrong. All should be located in /Applications, not /Programs. For Firefox, use this setting:
"firefox": "open -a \"/Applications/Firefox.app\"",
Do the same for Chrome and Opera if you plan on using them for testing.
I am using ESLint in my Vue(Nuxt) project in VSCode. When I save I would like my ESLint to run automatically and fix all the warnings for me automatically.
This is my settings.json file in VSCode:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false,
"vetur.completion.scaffoldSnippetSources": {},
"vetur.completion.useScaffoldSnippets": false,
"vetur.format.defaultFormatter.html": "none",
"workbench.iconTheme": "material-icon-theme",
"git.autofetch": true,
"git.defaultCloneDirectory": "",
"gitlens.views.repositories.files.layout": "list",
"editor.tabSize": 2,
"editor.detectIndentation": false,
}
And this is my .eslintrc.js file:
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
extends: [
"#nuxtjs",
"plugin:nuxt/recommended",
"../.eslintrc.js"
],
rules: {
//Add custom rules for the frontend here.
//Rules that are common for shared, frontend and backend should go in the parent file
"nuxt/no-cjs-in-config": "off",
},
}
The linked ../.eslintrc.js file contains the following:
module.exports = {
parserOptions: {
parser: 'babel-eslint',
},
plugins: ['jest'],
rules: {
'prefer-const': 'off',
'comma-dangle': ['error', 'always-multiline'],
'prefer-template': 'error',
},
env: {
'jest/globals': true
}
}
Whenever I save the file the warnings just show up and will not automatically fix themselves.
EDIT:
I've turned on verbose output and i'm seeing this in the output:
(node:6832) UnhandledPromiseRejectionWarning: Error: Failed to load plugin 'import' declared in 'frontend\.eslintrc.js » #nuxtjs/eslint-config': Cannot find module 'eslint-plugin-import'
Require stack:
I've then ran yarn add eslint-plugin-import and tried again, it still returns the same error.
Get eslint plugin, add this code to your settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript"]
}
source
Launch VSCode,
Command + Shift + P, type settings and hit enter, paste and save the following:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
}
You're good to go!
I've managed to fix the issue.
The problem was that there were multiple working directories in my solution, which all have their own eslint config.
Putting the following line in the settings.json file of VSCode solved my issue:
"eslint.workingDirectories": [{ "mode": "auto" }]
I tried those solutions and others, and it still didn't work. Actually it was just that ESLint's use had to be approved for use in VSCode. That is, I clicked on the ESLint item on the editor's bottom bar:
Which opened a popup asking me to approve ESLint. After approval autocorrect was running as expected.
Install ESLint extension from the VSCode marketplace.
Once the ESLint extension has installed you may use CTRL + SHIFT + P to open the Command Palette. Search “ESLint fix all auto-fixable Problems” and press enter.
This command would enable eslint to fix the file on save.
In the snap above as you can see that I am getting eslint errors and just to inform you all that despite saving the file, all auto-fixable problems are were not getting fixed by eslint/prettier setup.
So I tried pressing ctrl+shift+p and selecting prettier as default formatter and also tried doing eslint restart server but that didn't worked.
I noticed that vscode was giving me some notifications at the bottom right corner (bell icon). I clicked on that and some list of pop up came up stating that there are multiple formatters installed for the same extension file. Like for example in the below snap there is .jsx file(it had two formatters one was prettier and other was vscodes inbuilt formatter). I clicked on configure button and selected prettier as default and when I saved the file it worked!
If this doesn't works for you then I think this all worked for me because I had eslint npm packages installed in my project that works with prettier to enforce the prettier rules. (these packages are eslint-config-prettier and eslint-plugin-prettier)
I ran into a similar problem-- ESLint was not properly formatting only certain, seemingly random, files on save. Running ESLint --fix would fix the formatting errors, but saving would not. Adding this line to our workspace settings.json fixed the problem:
"eslint.format.enable": true,
Making all our formatter settings look like this:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.format.enable": true,
You can also go into the ESLint extension settings and check off the checkbox labeled ESLint > Format:Enable. Worked like a charm!
What fixed it for me was adding this to settings.json, because VSCode didn't know what formatter I wanted to be used on save:
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
Check if in the settings.json there are other formatters enabled, in my case I had this by mistake.
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"}
After getting the Eslint plugin you need to add this line to the settings.json:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Still not working? check if your eslint works fine by running this in the terminal:
eslint --ext \".js,.vue\" --ignore-path .gitignore .
If it failed with exit code 2 try removing node modules and install again.
After running this command you should see the eslint errors.
I was dealing with the same issue, and nothing seemed to help, even though I did all the configurations correctly, and ESLint was marking the problems in my files correctly.
For me the solution was to move the .vscode folder to the project root.
Now everything works as intended.
I recently switched to a new computer, and am having difficulty with a prettier setting. (I think it's prettier, could be eslint).
This gif illustrates what's happening:
http://g.recordit.co/H871hfT9Sv.gif
Anyone know what this setting is called? I would prefer all imports to be on a single line unless the length extends the printWidth setting.
Here are my relevant User Settings from VS Code:
{
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "all"
}
Thanks !
Edit:
Visual depiction so you don't need to watch the gif.
Expected:
import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { isIphoneX } from 'react-native-iphone-x-helper'
Behavior: (unwanted)
import React from 'react'
import {
Dimensions,
StyleSheet,
View
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {
isIphoneX
} from 'react-native-iphone-x-helper'
For those trying to quickly change Prettier settings for VS Code. Here are the steps:
Go to FILE -> PREFERENCES -> SETTINGS. (VS Code Menus)
Settings window should open. Above (Top) there is a search. Type "Prettier"
You should see the available Prettier settings. You can modify them :)
The new way to configure prettier settings:
at the root of your project folder, create a new config file (I'd suggest calling it either ".prettierrc.json" or just ".prettierrc")
in that new file, add json custom settings: my go-to settings for JS are as follows:
{
"trailingComma": "none",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}
I'd suggest doing this in each of your projects and including in any source control, that way every pull of the repo will automatically set some base settings for that developer's instance of prettier.
ctrl + ,
paste --> Prettier: Require Config
uncheck it, then all done.
I had issue with formatting in VSCode. It was taking extension settings from prettier.
I did the following setting ins .vscode/settings.json
created .prettierrc.json file in root of the project
Installed npm install --save-dev prettier
These settings worked for me in vs code.
.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"prettier.useEditorConfig": false,
"prettier.useTabs": false,
"prettier.configPath": ".prettierrc.json",
}
.prettierrc.json
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
I had a similar issue. To fix this, go into your prettier extension settings and look for "Print Width". Mine was set to '80'. I changed it to '100' and it all fit on one line after I saved the file. You can change the width to whatever you would like.
If Prettier isn't showing up in your VS Code Settings, the extension may have silently crashed, which happens often when settings are changed in multiple places (i.e. tab size was changed in workspace as well as in settings).
Restart VS Code, and search for Prettier again, it should show up this time :)
create .prettierrc file in the project dir, and use following code.
{
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
These two steps helped me to set up the .prettierrc file correctly
1- Go to VsCode settings and check formate on save
2- Go to VsCode settings.json and set the defaultFormatter
"editor.defaultFormatter": "esbenp.prettier-vscode"
I've started working with MeteorJS, which requires Handlebars templates to end with *.html.
You can't use *.hbs, or Meteor will throw an error.
I'd like to simply use *.hbs.html, so Meteor won't raise an exception, and I'll get the syntax highlighting for Handlebars simultaneously. How can I customize Sublime to recognize *.hbs.html as Handlebars syntax?
UPDATE:
Here's my code for ApplySyntax (not working yet):
"syntaxes": [
{
"name": "Handlebars",
"match": "all",
"rules": [
{"file_name": ".hbs.html$"}
]
}
]
Try this in ApplySyntax:
"syntaxes": [
{
"name": "Handlebars/Handlebars",
"extensions": ["hbs.html"]
}
]
The key is in the name - you need to specify the name of the package AND the path to the .tmLanguage file (extension excluded) within that package. I think it's in the root of the Handlebars package in this case, so this should work.
If you need other extensions just add them to that array, or if you need more complex matching you can use regular expressions as outlined in the other answer (or a combination of both).
By default Sublime Text only uses the last extension part to detect syntax, in your case, it's html.
There's a plugin called ApplySyntax that can detect syntax by any part of the filename, like hbs.html, apart from other things - see the default settings file for examples.
The ApplySyntax configuration should look like
"syntaxes": [
{
"name": "Handlebars",
"rules": [
{"file_name": ".*\\.hbs\\.html$"}
]
}
]
I was able to get this working without any extra packages. I'm using Sublime Text 3 Build 3126.
Open the file whose syntax you want to change
Go to View → Syntax → Open all with current extension as → select the appropriate syntax
Preferences → Settings - Syntax Specific
Change the extension as appropriate, for example:
{
"extensions":
[
"hbs.html"
]
}
Save the syntax settings file
I'm trying to configure sublimelinter, specifically jshint on my Mac. On my windows version of SublimeText there is the following section in SublimeLinter.sublime-settings
"jshint_options":
{
// To fix column positions for JSHint errors you may want to add `"indent": 1` to your
// **User** "jshint_options". This issue affects users with tabs for indentation.
// This fix was reverted due to a conflict with using the `"white": true` option.
// "indent": 1,
"evil": true,
"regexdash": true,
"browser": true,
"wsh": true,
"trailing": true,
"sub": true
},
When I view the file on my Mac this section doesn't exist, is there a place to edit these option on the Mac version without a separate settings file? Or a global settings file for jshint?
I've been digging through similar questions but haven't found a clear solution.
Update:
Actually it doesn't seem to catch any errors at all when using it on the console. My javascript file doesn't end in .js how can I configure it to look at different extensions? I can't find it in the docs.
There's another way to set options globally, without using ".jshintrc" files.
1) create a file with any name (e.g. "jshint.conf"). my file is:
{
"globals": { "$": false },
"globalstrict": true,
"devel": true
}
2) put it anywhere. in my case it is: "c:\Users\Smith\AppData\Roaming\Sublime Text 3\Packages\User\"
3) make the next reference in section "jshint"->"args" of sublime-linter user setting (user/SublimeLinter.sublime-settings):
{
"user": {
"linters": {
"jshint": {
"args": [
"--config", "c:\\Users\\Smith\\AppData\\Roaming\\Sublime Text 3\\Packages\\User\\jshint.conf"
]
}
}
}
}
4) Enjoy!
In general I would recommend against configuring JSHint system-wide. It's usually safer to create a .jshintrc file for each project your work on because it's likely they will have different JSHint requirements.
The jshint_options SublimeLinter setting you mention in your question is from the old version of SublimeLinter, which has recently been reworked to have a simple plugin architecture. The JSHint plugin (which I assume you are using, since the settings you tried didn't work) makes the same recommendation:
You can configure jshint options in the way you would from the command line, with .jshintrc files.
The added benefit of this approach is that you can commit the .jshintrc file to your repository and ensure that anyone who works on the project is working with the same JSHint rules, rather than their own system-wide settings.