JS correcting syntax in Sublime Text 3 - javascript

Im new to to Sublime Text 3. I used to use Netbeans which had a great syntax correcting system for JavaScript and PHP. So far, Sublime has great features. Its fast and beautiful, but it does not have syntax correcting errors when I create JS files. Is it a possibility to get this working? I read a bit on "SublimeLinter" but when I installed it, it seems to not work correctly. Can anyone help?

Have you try to install SublimeLinter for Sublime Text 3?
(I don't think this package is directly available in the Package control plugin, so you have to dowload the .zip and extract it in your Sublime Text 3/Packages folder)
[Edit:]Check: "If you plan to edit files that use a JavaScript-based linter (JavaScript, CSS), your system must have a JavaScript engine installed. Mac OS X comes with a preinstalled JavaScript engine called JavaScriptCore, which is used if Node.js is not installed. On Windows, you must install the JavaScript engine Node.js, which can be downloaded from the Node.js site."

Sublime Linter 3 is the way I've found useful so far.
To use it, first you must install node.js on your system.
Then, using package manager find and install Sublime Linter and Sublime Linter-jshint, quit from Sublime Text.
Type npm install -g jshint onto your terminal, open Sublime Text.

Very Easy...well kind of ! here are the steps :
hint: before you do this remove a semicolon or something from you .js file to make sure you have an error for a file to test this with:
Follow this steps on the clip below:
https://www.youtube.com/watch?v=TVE3E9AvRag
Right click on the file and then run jshint
If you still don't see the yellow line editor then:
cd '/path/to/Sublime Text 3/Packages'
git clone https://github.com/SublimeLinter/SublimeLinter3.git SublimeLinter
you should see this errors/yellow dot on the line with error auto-magically :

Related

How to add a new Language(similar with javascript) in VSCode?

I want to develop a vscode extension to support a new language(like script.code) in vscode. Actually this language is very similar with Javascript, I just add some new intellisence and snipets, also my own debugger.
My problem is for the intellisence how to show the ECMAScript intellisence in my language file. For example, if I input Object, the intellisence list did't show the es6's option. I want to this file behave like Javascript file, also with my own intellisence and snippet. Any suggestions and comments are welcome, thanks!
Developing extension or giving support to new language or creating new code snippets in visual code can be done in many ways.
Best way and simple way is as below:
Prerequisite:
Node
If not install node from https://nodejs.org/en/download/
Once this is done check for
node -v and npm -v, You should get version of node and NPM
Then install yeoman and yeoman VS Code Generator from git bash
type in below command
npm install -g yo generator-code
yo code
Select option : New Language Support
Then edit the auto generator files and give the extension name in package.json
Debug the extension, once done publish it.

ESlint for VSCode without using node or alternative?

We are teaching fundamental JavaScript to beginners and have recently switched from the Atom editor to VSCode. The problem with this is that VSCode requires us to install node and then npm install eslint, whereas in Atom, we can use the atom package manager to download a linter-eslint package that we can then point directly at a gloabl .eslint file. While it's not a huge deal to install and use node, we are trying to reserve all things node related for a later more advanced class so we can focus on fundamentals.
Is there a way to use ESlint in VSCode without downloading and installing it through node, or is there another alternative extension that we can use that would give us similar functionality?
There is an eslint extension for VS Code that MS supports: https://github.com/Microsoft/vscode-eslint
FWIW, I found that by googling "ESLint vscode". ;)
Given that the MS supported version still wants you to install eslint via npm, this is probably the only way to go.
FWIW, Atom itself is written in Node, so I'm guessing that it's doing the same thing, just hidden behind some UI snazziness.

ES6 ES2015 (Babel) Format / Beautfier for Sublime for .jsx .js

I want to be able to format my code in Sublime when doing Reactjs using ES2015.
Spent quite some time looking for a answer to this and found this thread
Is there a JSX formatter for sublime text?. But it seems to never come to a solution. Babel and ESlint does everything for me except formatting the code.
Have you tried sublime-jsfmt? adding the esformatter-jsx plugin might help to format the code. (disclaimer: I made it), it has some bugs for some corner cases that need to be fixed, but for the most common cases you might get good results.
One of the things that I was thinking it is to write the formatting code from scratch, using babylon to parse the code. Currently it uses js-beautify.
Here is an online demo in case you want to try it
you can try to install babel theme for sublime text, it support all es6 and jsx. you can find it here: https://github.com/babel/babel-sublime
You can install the babel syntax by following the below steps.
1.go to this url https://packagecontrol.io/installation copy the code of sublime text 3 or sublime text 2 from the url
2.open sublime text editor and go to menu options of View and select the "show console"
3.then paste the code from the above url and press enter.It will install the package manager.
4.press ctrl+shift+p and type install in the input box. A list of options will come,then select the Install package option.It will install.
5.After installing the above press again ctrl+shift+p and type the "babel" and select babel in the list.It will install the babel syntax
6.to change the syntax of the page select the view menu and choose syntax/babel

Sublime 3 Package for Jade Syntax Highlighter,Linting,Auto Complete etc

I have installed the Sublime Text suggested packages, however nothing seems to work well for syntax highlighting, code linting and auto suggestion. Can someone suggest a complete package for Jade.
The Jade package on Package Control has 146,000 installs at the time of commenting. I'm pretty sure it works fine.
https://packagecontrol.io/packages/Jade
A highlighter using Python instead of JavaScript is also included for use with PyJade, you can either manually select Jade (Python) from the syntaxes list or give your file the extension .py.jade to select automatically (only on Sublime Text). Also included is a test.py.jade file that can be compiled with pyjade to test it.
You'll need to install Package Control first before installing any packages from there. It's really easy to do, just follow the instructions here. https://packagecontrol.io/installation (make sure you choose the correct version).
I've run into similar issues and would try a few things first:
First, if you happened to have your Jade file open when you did the install, you just need to close the file and re-open it to see package working.
If Step 1 isn't the issue, see if the package is enabled. Package Control > Enable Package > Jade. If you don't see it in the list of available options, that means it's already enabled. If it is in the list, then enable it.
If it is already enabled, first disable it with Package Control > Disable Package > Jade then re-enable it with Package Control > Enable Package > Jade.
Restart Sublime (probably not needed, but doesn't hurt).
This should get the package working for you.

Unnecessary semicolon using Sublime Text 3 autocomplete for JavaScript if-statement

I am using sublime text 3 autocompletion for JavaScript.
For if-statement, it added a semicolon at the end.
if (true) {};
Using JSHint, it gives me an error for most of my code written.
I would like to ask how to customise this autocompletion as my preference?
Open the Sublime Text Folder by going to Preferences → Browse Packages.
Then find the folder called JavaScript
Then open if.sublime-snippet and delete the semi-colon so your snippet now looks like this:
<snippet>
<content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
<tabTrigger>if</tabTrigger>
<scope>source.js</scope>
<description>if</description>
</snippet>
Since #wesbos answer did not do the trick for me here is what I found out.
Sublime 3 does not extract packages. You will find your packages (on linux) in either /opt/sublime_text/Packages/ for default packages or ~/.config/sublime-text-3/Installed Packages for packages you installed, in a zip archive with the extension .sublime-package.
To change the content of a package install the Package Resource Viewer and execute the command : Open resource browse to the file you want to change (if.sublime-snippet, I would also change the for-()-{}.sublime-snippet since it has the same strange semicolon in there) and edit it.
Once you save the file it will save it to ~/.config/sublime-text-3/Packages/JavaScript/if.sublime-snippet. This file then overwrites the default file in the original zip package.
As I understood it is important to know that files that you overwrite in this way will not be updated when you update packages, since they overwrite whatever is in the updated package!

Categories