Skip to content

Conversation

@sgupta7857
Copy link

@humphd I have made some progress on this bug. After our conversation in class, I was able to add the code that kills the dependancy for .brackets.json file by having default preferences defined with in main.js [of extension]
and lint is disable now by default
Now further I will be implementing onchange/onclick functions that will allow me to interact with toggle button in thimble.

@sgupta7857
Copy link
Author

Nope, it's wrong. The only reason it works is because .bracket.json is not present
I will try to fix it

Copy link
Owner

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some feedback. Let me know how you progress.

"url": "https://github.com/mozilla/brackets.git",
"branch": "",
"SHA": ""
},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can do git checkout master src/config.json to get rid of this change.

var preferencesID = "interactive-linter";

var defaultPreferences = {
delay: 500,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These need to get indented 4-spaces.

delay: 500,
enabled: false,
webworker: true,
javascript: "eslint"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wrong. If you look above at .brackets.json you'll see that it's an array of strings.

_preferences.definePreferences("enabled", "boolean", defaultPreferences.disable);
_preferences.definePreferences("delay", "int", defaultPreferences.delay);
_preferences.definePreferences("webworker", "boolean", defaultPreferences.webworker);
_preferences.definePreferences("javascript", "string", defaultPreferences.javascript);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also wrong here, you'll need to define an array of strings instead.

_preferences.definePreferences("webworker", "boolean", defaultPreferences.webworker);
_preferences.definePreferences("javascript", "string", defaultPreferences.javascript);
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove all this extra whitespace.

*/
function appReady() {

loadPreferences();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the blank live above this, move it below.

Copy link
Owner

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good. I left some notes about fixes to make, and also a way to have us load less code when the extension is disabled on startup.

linterManager = require("linterManager"),
pluginManager = require("pluginManager");


Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get rid of this empty line.

pluginManager = require("pluginManager");


var defaultPreferences = {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This entire code block (line 25-34) is indented one tab stop too far. Make it line up with what's above and below it

addGutter(currentEditor);
handleDocumentChange();
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get rid of this blank line.

*/
function appReady() {
loadPreferences();
// Removes the default Brackets JSLint linter
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we are going to disable everything by default, and because it will add a lot of network size when we first load the app, I think we should do lazy-loading of all the linting plugins. To do this will requires a few things:

  • Move all of the code from 172 to 205 into a function named init. This init function will take care of loading all the plugins and registering them, as well as calling setDocument to enable any in the current editor.
  • After you call loadPreferences() on 171, do an if check to see if the enabled pref is true, and if it is, call init() immediately (i.e., if the user has the pref enabled=true, then we'll load all the plugins right now on startup). If it's false, add a one time event listener (e.g., the one() method) for the enabled pref changing to true, and call init() when that happens. This way we can wait until they opt-in to having these linters turned on before we do the step of loading everything over the network.

Does this make sense? When you're done doing all this, you should be able to test both ways of loading things by setting your default value for enabled above to true or false and then watching your dev tools Network tab to see what does and doesn't load in each case.

*/
function setDocument(evt, currentEditor, previousEditor) {
if(!preferences.get("enabled")){
return ;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the extra space between the n and the ;? Remove it.

@humphd
Copy link
Owner

humphd commented Apr 10, 2017

@sgupta7857 it's been a week, what's up with this?

@sgupta7857
Copy link
Author

@humphd I am having trouble loading the plugin. Can you tell why is it happening?

init();
} else{
preferences.on("change", function handleChange(){
if(preferences.get("enabled"){
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a ) at the end.


function loadPreferences(){
preferences.definePreference("enabled", "boolean", defaultPreferences.enabled);
preferences.definePreference("javascript", "array", defaultPreferences.javascript);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some debugging, and it's crashing when it tries to redefine this preference when the eslint provider is loaded. Remove this line (31) and line 32 below. In fact, just change lines 24-33 to this:

function addEnabledPref() {
    // We disable this by default
    preferences.definePreference("enabled", "boolean", false);
}

Copy link
Owner

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some debugging and was able to get things working by fixing some issues you have in your code.

Also, you must fix your indenting. It's impossible to read the code when it's all misaligned. Take some time first thing and fix all your indents to 4-spaces.

linterManager = require("linterManager"),
pluginManager = require("pluginManager");

function addEnabledPref() {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is indented too far.

CodeInspection.register("javascript", {

function init(){
CodeInspection.register("javascript", {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is indented too far.



function appReady() {
addEnabledPref()
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At this point, because it's a single line function, I think you should just inline this and put preferences.definePreference("enabled", "boolean", true); here vs. calling the function.

addEnabledPref()
if (preferences.get("enabled")) {
init();
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

} else {

Copy link
Owner

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want you to fix the indenting in this file, and then figure out, once and for all, why you're getting it wrong all the time. Is it because you don't know how to do it correctly? If so, it's important that you learn to do it. Is it that you are going fast and didn't notice? If so, you need to slow down. Is it that you don't care? If so, I'd encourage you to rethink about the importance of code readability, since you're making mistakes due to your misalignment, and not being able to read the code for what it is.

If you need help understanding any of this, let me know. But let's not continue to have you get it wrong.


function init(){
CodeInspection.register("javascript", {
CodeInspection.register("javascript", {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This entire function is indented incorrectly. I want you to actually pause for a minute, and look at what's here. There should be 4-spaces for each indent level. Look at what you have:

 	function init(){
	    CodeInspection.register("javascript", {
            name: "interactive-linter-remove-jslint",
            scanFile: $.noop
        });

        // Load up plugins and wait til they are done loading before we
        // register any handlers into Brackets
        pluginManager().done(function(plugins) {
            for (var iPlugin in plugins) {
                linterManager.registerLinter(plugins[iPlugin]);
            }

            EditorManager.on("activeEditorChange.interactive-linter", setDocument);
            setDocument(null, EditorManager.getActiveEditor());

            // If the linters change, then make sure to rebind the document with the new linter
            var lastLinters;
            preferences.on("change", function() {
                var editor = EditorManager.getActiveEditor();
                if (!editor) {
                    return;
                }

                var language = editor.document.getLanguage().getId();
                var linters  = preferences.get(language);

                if (linters && !_.isEqual(linters, lastLinters)) {
                    lastLinters = linters.slice(0);
                    handleDocumentChange();
                }
            });

        });
	}

Just casually looking at that, you can see that it makes no sense. It looks like you're closing the init() function on the 4th line. The actual close is way down at the bottom, but it's impossible to see, because you haven't indented the pluginManager's done callback properly.

We've discussed this a bunch in my office, and I don't understand why we're still discussing it. Please fix all indentation issues in this PR, push it, and then come to Github and look at it to make sure it's right and that your editor isn't lying to you.

Here's what it should look like:

function init() {
    CodeInspection.register("javascript", {
        name: "interactive-linter-remove-jslint",
        scanFile: $.noop
    });

    // Load up plugins and wait til they are done loading before we
    // register any handlers into Brackets
    pluginManager().done(function(plugins) {
        for (var iPlugin in plugins) {
            linterManager.registerLinter(plugins[iPlugin]);
        }

        EditorManager.on("activeEditorChange.interactive-linter", setDocument);
        setDocument(null, EditorManager.getActiveEditor());

        // If the linters change, then make sure to rebind the document with the new linter
        var lastLinters;
        preferences.on("change", function() {
            var editor = EditorManager.getActiveEditor();
            if (!editor) {
                return;
            }

            var language = editor.document.getLanguage().getId();
            var linters = preferences.get(language);

            if (linters && !_.isEqual(linters, lastLinters)) {
                lastLinters = linters.slice(0);
                handleDocumentChange();
            }
        });
    });
}

}

require("lintIndicator");
require("lintIndicator");
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look at this. Surely you can see that it's not aligned with what's before/after it? Why is your indentation so wrong everywhere? Is your editor setup incorrectly?

init();
}
});
});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be aligned with the preferences keyword on 197 above.

Copy link
Owner

@humphd humphd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still not right. I've tried to show you the problems visually. I get the feeling that you actually don't understand how to do this properly, which is an issue you will want to tackle, in general.

I'd recommend you install something like prettier in your editor to help you auto fix your code as you work: https://github.com/prettier/prettier.

I'd also suggest you put some serious time into figuring out when and how to indent manually. You need to know how to do this as a professional developer.

handleDocumentChange();
}
}
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wrong. Take a look at this:

screen shot 2017-04-21 at 3 13 46 pm

See how the increased indent you've added means that the function no longer lines up with its closing }?

if (!editor) {
return;
}
function init() {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like you've copy/pasted what I did, but neglected to indent it so that it lines up with the surrounding code. Look at this:

screen shot 2017-04-21 at 3 16 39 pm

See how the function appReady no longer lines up with this? Everything in this init function needs to move over 1 tab (4-spaces) to line up.

});

});
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is wrong. Look at this:

screen shot 2017-04-21 at 3 19 16 pm

See how your if and else on lines 193 and 195 don't line up with this closing }? They all have to match.

@sgupta7857
Copy link
Author

sgupta7857 commented Apr 21, 2017

for some reason, the code whatever indendation I fix on sublime doesn't match on github. I am using a different editor now Atom. Will fix the indentation and upload it
can you please review my code for release 0.4
error: My thimble isn't loading
sgupta7857#2

@sgupta7857
Copy link
Author

I used the preetier extension. hopefully it solves the indentation problem

@humphd
Copy link
Owner

humphd commented Apr 23, 2017

Unfortunately this won't work. You've applied prettier's default styling (2-space indent) to the entire file, which you aren't changing here. The effect is that it's now impossible to see your actual changes, because it looks like every line has been changed.

If you want to undo this commit, you can do this:

git checkout -B disable-lint 67764868be51d2eb6dfb47ca4d749a4662b9168c
git push origin disable-lint -f

Then you can fix your indenting as I asked, and push again.

@humphd humphd force-pushed the interactive-linting branch from 319c52c to fbc35d4 Compare July 20, 2017 21:08
humphd pushed a commit that referenced this pull request Feb 2, 2018
Fix mozilla/thimble.mozilla.org#2506

* Added all components for Border Radius Inline editor

* remove text selection after closing inline border radius editor

* made allCornerSlider and individual slider work seperately without effecting each other

* added the slider value indicator

* modified BorderRadiusEditor to allow keeping all units(%,em,px)

* modified BorderRadiusEditor to allow keeping all units(%,em,px)--#2

* added radio buttons to toggle slider unit

* making individual corner values sync with allcorner mode value

* Border UI updates

* fixed when close inlineEditor the cursor do not go to top

* Light theme + CSS cleanup

* code cleaned up

* fixed indentation and replaceAll() local function

* fixed some indentations

* removed _values local property from borderRadiusEditor.js

* Fixed few indentations and comments

* added comment for borderRadiusUtil

* added more comments in borderRadiusUtils.js

* Fixed few comments

* Review fixes

* Fixed some codes according to comments from gide

* fixed indentation

* fixed indentation 2x
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants