thesavior / eslint-formatter Goto Github PK
View Code? Open in Web Editor NEWSublime Text 3 Plugin to Autoformat with Eslint
License: MIT License
Sublime Text 3 Plugin to Autoformat with Eslint
License: MIT License
Given a bit of code,
var strings = [
"double",
'single',
];
ESLint-Formatter works just fine. However, given a bit of code with ES6 template strings or template literals,
var strings = [
"double",
'single',
`templates`,
];
drops an error in the SublimeText console: "4:5 error Parsing error: Unexpected character '`'"
Furthermore, I am noticing formatting errors with ES6 keywords, specifically let
and const
.
I have a monorepo project (inside project multiple sub-project each with own package.json). ESLint is set up in the project root directory, and not in sub-directories with own package.json. With this change introduced in 2.3.0 ESLint-Formatter looking in the closest package.json, but if there is no ESLint, it won't look into project root, and go straight to globally installed ESLint.
Using node.js path on 'osx': /usr/local/bin/node
Using eslint path on 'osx': /usr/local/bin/eslint
Unexpected error(<class 'Exception'>): Error: module.js:471
throw err;
^
Error: Cannot find module '/usr/local/bin/eslint'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3
error: Error: module.js:471
throw err;
^
Error: Cannot find module '/usr/local/bin/eslint'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3
I have verified the lint debug view that my node path and eslint path is correct. I also verified manually running the eslint works. My question is that upon fixing the file, it simply push my indent for the tab size i set in eslint config but it did not delete the bad spaces. What is your experience so far, I know I should probably go ahead ask eslint team but was wondering if this is the expected behavior...
// The location of the globally installed eslint package to use as a fallback
"eslint_path": {
"windows": "%APPDATA%/npm/node_modules/eslint/bin/eslint",
"linux": "/usr/bin/eslint",
"osx": "/usr/local/bin/eslint"
},
I see the default path settings for eslint_path (when it cannot find a local eslint binary) is "%APPDATA%/npm/node_modules/eslint/bin/eslint".
In the default path, there is my user folder "Thomas Cheng" (notice the space in between). "Thomas Cheng" is also the equivalent environment variable %USERPROFILE%.
When I do the lint, it will return the following error:
It captured the path "C:\Users\Thomas", but skipped the rest of the path due to the "whitespace" between Thomas Cheng.
Right now, my only workaround is to hardcode the path instead of using %APPDATA%.
Would appreciate if you could help take a quick look into this issue.
Thank you very much for your kind assistance, and afterall an amazing plugin!! Thanks!
Hi,
First of all - thanks for the plugin, very promising. Do far I have noticed a problem - when there are several problems in my code I have to repeat Ctrl-Shift-H several times to get the desired effect. It looks like errors are fixed one by one, not all-at-once.
Would be nice if it mentioned this in the readme :)
Is it possible to have errors only in console and not with the annoying popup? There are situations where I know there will be errors but having a popup interrupt my workflow heavily.
My current setup is such that I have a single folder, called Projects, where I have all my JS repos. This is the folder I import into Sublime because I am constantly creating and deleting projects and like to avoid having to manually add projects to the sublime space.
Now each project has its own version of eslint
and a .eslintrc
file. In an instance of Sublime with one of these projects imported individually, the plugin works well. The problem is that when there is a high level folder containing them, the user settings for the formatter are ignored and it tries to default to the global settings, which fail.
Not sure if this is a bug or intended. If intended, is there a way to override this behavior to allow the formatter to use local settings?
I've got this config for eslint-formatter in settings > user
:
{
// The location to search for a locally installed eslint package.
// These are all relative paths to a project's directory.
// If this is not found, it will try to fallback to a global package
// (see 'eslint_path' below)
"local_eslint_path": {
"windows": "node_modules/eslint/bin/eslint.js",
"linux": "node_modules/.bin/eslint",
"osx": "node_modules/.bin/eslint"
}
}
but seems without a sublime-project file as below, format this view
won't work, always complained about eslint binary not found.
Just wondering is a sublime-project file necessary to make it work?
{
"folders":
[
{
"path": "."
}
]
}
Hi, i am not sure that my request is meaningful, but can this plugin support other eslint formatters like json, html etc. pp.?
P.S: if it is already possible now, what i have to do for get my html file formatted? Sry for my bad english.
P.S.S: i found its not posible with eslint to format html my bad
like:
{
// The Nodejs installation path
"node_path": {
"windows": "node.exe",
"linux": "/usr/bin/nodejs",
"osx": "/usr/local/bin/node"
},
"eslint_argv": ["--no-eslintrc"], // eslint options
"config_path": "~/.eslintrc.js",
}
Because when your project has .eslinrc
file and set up config_path
, You must set --no-eslintrc
.
I have both your ESLint-Formatter and SublimeJSCSFormatter installed. When I run ESLint Formatter I get this error:
Error: No configuration found. Add a .jscsrc file to your project root or use the -c option.
And this is correct, I have no .jscsrc
for current project, but I have .eslintrc.json
and run ESLint Formatter.
I think problem is in the name of main class FormatJavascriptCommand
. Both plugins use this name for command and Sublime Text decides which plugin will run this command. I suggest to use different commands in this plugins.
I installed this today, and I really like it! However, I keep getting errors like these. What additional debug information can I provide to help resolve this issue?
Unexpected error(<class 'TypeError'>): Can't convert 'NoneType' object to str implicitly
error: Can't convert 'NoneType' object to str implicitly
This is the eslinter output:
myFileName.js: line 3, col 8, Warning - 'SettingsUtils' is defined but never used (no-unused-vars)
myFileName.js: line 6, col 3, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 6, col 20, Warning - Missing space before function parentheses. (space-before-function-paren)
myFileName.js: line 7, col 5, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 8, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 9, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 10, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 14, col 3, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 14, col 23, Warning - Missing space before function parentheses. (space-before-function-paren)
myFileName.js: line 15, col 5, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 16, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 17, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
myFileName.js: line 18, col 7, Warning - Expected indentation of 1 tab character but found 0. (indent)
Is there a way to disable autofix of the no-debugger
rule without completely disabling the warnings/errors?
Some tools like vue-cli place the eslint config inside package.json
in a eslintConfig property.
Is this supported by ESLint-Formatter
?
Hi, I just tried your plugin and it works great. My only concern is that the directory for Node and ESLint is hardcoded into the settings which makes it inconvenient for nvm users who use a different directory. How about making it dynamic instead? I am asking since I faced the similar issue with plugins that depend on Node before, so I'm using a script which overrides the PATH to fix it. If you don't have time I'm always happy to help with PR.
set format_on_save: true
not work on Mac.
I have try using sublime pos_save hook to run format_eslint
command, not work again.
Hope for your help. Thanks.
It looks like this line: https://github.com/TheSavior/ESLint-Formatter/blob/master/ESLint-Formatter.py#L171
Minor bug, not that important but still an issue: formatting doesn't work (no errors, just doesn't do anything) if the file is not saved first.
This plugin needs a test suite to ensure the stability of the plugin and verify changes.
If anyone has experience with python or sublime plugins and wants to take a stab at this, or has recommendations for a path to go down, that knowledge would be much appreciated.
It looks like this might be a good approach:
https://github.com/randy3k/UnitTesting
When I try to run it, I get an error popup saying that the module 'C:\Users\Me' cannot be found. I have eslint installed and I can run it just fine on the command line.
any chance this plugin is planning to work with .vue
files?
What command do we need to add to our Key Bindings file to change the default keyboard shortcut?
Would it be possible to use different config files like ESlint itself is doing? I have separate configs for src and test folders, so using only one config in the root, or specified will not work for me.
It would be nice if the plugin used the same logic as ESLint, looking in current files folders and then move on to parents until one is found.
v2.3.1 is installed, after setting config: "format_on_save: true",
it would only pop out Linter warning and not fixed.
But if using hot key, it works perfectly.
My env:
OS: Sierra 10.12
Sublime Text 3
Below is the debug message:
SublimeLinter: eslint: Hello.vue ['/Users/user/pwa/node_modules/.bin/eslint', '--format', 'compact', '--stdin', '--stdin-filename', '@']
SublimeLinter: eslint output:
/Users/user/pwa/src/components/Hello.vue: line 5, col 13, Error - Expected indentation of 6 spaces but found 8. (indent)
1 problem
I still can not find out the reason.
Has any idea?
Thank you
As per title. Add option to exclude folders from auto-formatting.
"format_on_save" is currently ignoring the rules set in .eslintignore
this would be very useful relying on the system global module may be the best option
For example .eslintrc.js
This is my sublime project.
.sublime-project
{
"folders":
[
{
"path": "."
}
],
"settings": {
"ESLint-Formatter": {
"format_on_save": true,
"config_path": "website/.eslintrc",
"local_eslint_path": {
"osx": "website/node_modules/.bin/eslint"
}
}
}
}
I open the project using the project file, not the folder.
local_eslint_path and config_path are supposed to be resolved relative to the project root, however the plugin doesn't seem to resolve correctly since it defaults to defaults.
EDIT: absolute path seems to work for config_path
but not for local_eslint_path
I installed the plugin,and config it ,but when I click the format menu, the file does not changed and the wrong format still exists.
I want to see the wrong format do not appear when I execute the format command.
Will you help me with this problem. Thank you very much!
my config file like this :
{
// Simply using `node` without specifying a path sometimes doesn't work :(
// https://github.com/victorporof/Sublime-HTMLPrettify#oh-noez-command-not-found
// http://nodejs.org/#download
"node_path": {
"windows": "D:/Program Files/nodejs/node.exe",
"linux": "/usr/bin/nodejs",
"osx": "/usr/local/bin/node"
},
// The location to search for a locally installed eslint package.
// These are all relative paths to a project's directory.
// If this is not found, it will try to fallback to a global package
// (see 'eslint_path' below)
"local_eslint_path": {
"windows": "node_modules/eslint/bin/eslint.js",
"linux": "node_modules/.bin/eslint",
"osx": "node_modules/.bin/eslint"
},
// The location of the globally installed eslint package to use as a fallback
"eslint_path": {
"windows": "%APPDATA%/npm/node_modules/eslint/bin/eslint",
"linux": "/usr/bin/eslint",
"osx": "/usr/local/bin/eslint"
},
// Specify this path to an eslint config file to override the default behavior.
// Passed to eslint as --config. Read more here:
// http://eslint.org/docs/user-guide/command-line-interface#c---config
// If an absolute path is provided, it will use as is.
// Else, it will look for the file in the root of the project directory.
// Failing either, it will skip the config file
"config_path": "",
// Automatically format when a file is saved.
"format_on_save": false,
// Only attempt to format files with whitelisted extensions on save.
// Leave empty to disable the check
"format_on_save_extensions": [
"js",
"jsx",
"es",
"es6",
"babel"
],
// logs eslint output messages to console when set to true
"debug": false
}
I have an .eslintrc.js file in my porject specifying that the airbnb style linter be used. but this is no way to condfigure this plugin to use such files within a project , is there?
I want to use different .eslintrc.js
file in my different project, but how to set config_path
?
Running windows 10, sublime text 3, ESLint-Formatter 2.1.1.
I just created an empty project and installed eslint locally. I have auto-format turned on on ESLint-Formatter config.
Seemingly 1 in 5 saves, eslint tries to load from the local eslint, and the other 4 it uses global. I assume this is probably #17 causing it to not always find the local eslint.
Whenever it uses the global eslint, it loads node with %APPDATA%/npm/node_modules/eslint/bin/eslint
which is a Javascript file, and works great. However...
Whenever it uses the local eslint, it loads node with node_modules/.bin/eslint
which is a shell file, and causes this to pop up as an error message:
Unexpected error(<class 'Exception'>): Error: <project>\node_modules\.bin\eslint:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:513:28)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.runMain (module.js:575:10)
at run (node.js:348:7)
at startup (node.js:140:9)
at node.js:463:3
I'd suggest looking for node_modules/eslint/bin/eslint
for local installations instead.
Sometimes I'll undo a bunch of code changes and save the file to see how the application looked in a previous state, then redo all the changes to continue working from where I left off. When using "format_on_save": true
, this plugin breaks that redo stack.
The same issue occurs with Sublime's trim_trailing_white_space_on_save
setting.
I might just need to stop using this undo/redo approach since it is admittedly dangerous even without being broken in the way described in this issue.
As specified in the eslint docs, each configuration file should apply to "an entire directory (other than your home directory) and all of its subdirectories."
My Sublime project directory is the parent directory of multiple repositories, several of which are JavaScript projects. Thus I have several .eslintrc files, eg.
/project-root/subdir-one/.eslintrc # should apply to all /project-root/subdir-one/**
/project-root/subdir-two/.eslintrc # should apply to all /project-root/subdir-two/**
I want each of the .eslintrc
files to apply to the files in the appropriate subdirectories as defined by the eslint folks above. However, I can't figure out how to do that with this tool. As I understand, my only option is to set a config_path
for an entire project. It seems to me that since eslint
has a standard behavior, that should be supported in this tool.
rule
"no-mixed-spaces-and-tabs": "error",
"react/jsx-indent": ["warn", "tab"],
code
render() {
return (
<div styleName="home">
<div styleName="gong"></div>
<Header {...this.props} />
<div styleName="j"></div>
</div>
)
}
expect
render() {
return (
<div styleName="home">
<div styleName="gong"></div>
<Header {...this.props} />
<div styleName="j"></div>
</div>
)
}
real result
render() {
return (
<div styleName="home">
<div styleName="gong"></div>
<Header {...this.props} />
<div styleName="j"></div>
</div>
)
}
This is on Mac OS Sierra.
Error: /Users/jemarjones/Documents/Projects/example/node_modules/.bin/eslint:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
I get this error when trying to format a file. The only non-standard thing about my configuration is that I use the Node version manager.
My ESLint config points to the usual node.exe
location:
"eslint_path": {
"windows": "C:/Program Files/nodejs/node.exe"
}
And I tried multiple Node versions - 8.9.3, 8.9.4, 9.5.0 - it didn't make a difference.
Probably user error, but I installed ESLint-Formatter with Sublime Package Control and still get an odd error when I press cmd-shift-H:
When I type
$ eslint filename.js --fix
at the bash prompt it works OK.
But when I run eslint-formatter in Sublime Text 3 it pops up a Sublime-logoed window saying:
Error:
/Users/michael/.nvm/versions/node/v6.4.0/lib/node_modules/eslint/bin/eslint.js:16
const useStdIn = (process.argv.indexOf("--stdin") > -1),
^^^^^
SyntaxError: Use of const in strict mode.
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3
If I am converting from a file with 2 space indentation to 4 space indentation, all the code gets indented correctly, but comments remain at their original indentation.
For instance:
class {
/**
* My doc
*/
execute() {
// do something cool
doSomething();
}
}
gets reformatted into:
class {
/**
* My doc
*/
execute() {
// do something cool
doSomething();
}
}
when it should be:
class {
/**
* My doc
*/
execute() {
// do something cool
doSomething();
}
}
Whenever I use the formatter (either by using Ctrl+Shift+H or saving with "format_on_save" set to "true") the first three characters in the file get removed. Looking at the console It appears to be happening after "reloading."
Windows 8.1 Enterprise x64
Sublime Text 3, build 3126
ESLint-Formatter v2.2.1
Other Packages Installed...
Package Control v3.2.1
Babel v8.6.3
Currently, I'm using debug: true
in the config, and opening sublime's console to see the output, but it's not very practical, I don't think that's the right way to use it
Why doesn't it output errors in the stdout simply (like build commands do), on save?
I don't see any popup, like mentioned in other issues, maybe my OS (ubuntu17.04) and version (ST3 3126) explain the different behavior
Would it be possible to configure the formatter to format the file before it's saved (but after pressing Cmd-s) instead of after? Now it seems that the file is saved to disk, then the formatter formats the file and saves it again, resulting in two saves.
This is problematic in cases where saved files are watched for changes, as the first (unformatted) save triggers actions (babel-compiles etc), and the second (formatted) save goes by unnoticed since the action is already in progress.
Here's the SFC:
s<template>
<q-page class="">
<h1>Dev Comms</h1>
<h2>Registration</h2>
<q-btn @click="check()" rounded glossy color="purple" label="Check"></q-btn>
<q-btn @click="add()" rounded glossy color="purple" label="Add"></q-btn>
<q-btn @click="del()" rounded glossy color="purple" label="Delete"></q-btn>
</q-page>
</template>
<style></style>
<script>
export default {
name: "PageIndex",
methods: {
check() {
alert("check");
},
check() {
alert("add");
}
del() {
alert("delete")
},
}
};
</script>
If I set debug: true
then it shows that there's a syntax error with the missing comma:
33:4 error Parsing error: Unexpected token, expected ","
14 |
15 | }
> 16 | del() {
| ^
17 | alert("delete")
18 | },
19 | }
... but it doesn't fix it
Formatting works if I add the missing comma, then it will clean up the extra spaces etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.