I've installed tern_for_sublime for sublime text 3 following steps in github readme page of the project and autocomplete for core javascript functions like string functions are working.But browser DOM specific autocompletion is not available.I was intimated that for vim in the .tern-project file the following config must be done for DOM and jquery auto-completion:
{
"libs": [
"browser",
"jquery"
]
}
Even though I added the json the autocomplete isn't showing DOM Auto completion.So what should I add?
I solved this by adding .tern-config file at the root of my user directory as I needed the configuration globally which in my case is C:/Users/my-name containing the JSON defining the triggers as follows:
{
"libs": [
"browser",
"jquery",
"ecmascript" //for both es5 and es6 :)
]
}
If you don't need the above settings globally but you only need it for your project itself you can add the above JSON in a .tern-project file at the root of your project..!!
Related
I am using Prettier with format on save enabled
but when I make any change in App.js and save it
Prettier do destroy my code because it deals with it as plain javascript
I am using create-react-app so it produce the main component App.js
I am using .JSX in the other components but the problem is when I make any change to the App.js
I fixed this issue by changing the files associations setting in Vscode settings (specific to user workspace)
I just added this line
"files.associations": {
"*.js": "javascriptreact"
}
and worked perfectly for me.
rename your react files as 'jsx' files instead of js files and keep your vanilla javascript as js files. This way vs code and prettier know that you are using react-javascript instead of normal javascript.
I don't read anything about react in prettier documentation
As far as I understand, react code should be put in .jsx files, not .js
https://reactjs.org/docs/introducing-jsx.html
React doesn’t require using JSX, but most people find it helpful as a
visual aid when working with UI inside the JavaScript code
If you are using ESlint as well you should follow these steps...
yarn add --dev --exact prettier
yarn add --dev eslint-plugin-prettier
Create a .eslintrc file in the root of your project with the following contents
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
That should hopefully do the trick.
Prettier checks how your code is structured whereas VSCode syntax code highlighting controls how your code looks.
VS Code highlights code via extensions, not with Prettier. Out of the box, VS Code supports React and JSX natively. You also adjust VS Code's settings.json file. Here's an example off how that might look:
{
"window.zoomLevel": 0,
// Solarized-dark theme
"workbench.colorTheme": "Solarized-dark",
// Changes the highlight color in solarized-dark, which I can't see
"workbench.colorCustomizations": {
"editor.selectionBackground": "#5b455e",
"editorBracketMatch.border": "#555",
"editorBracketMatch.background": "#5b455e"
},
// Number of spaces in a tab
"editor.tabSize": 2,
// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,
// Override whatever the files say and give me 2 spaces per tab
"editor.detectIndentation": false,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always"
}
Prettier code formatting is usually controlled as part of a server, rolled up into something like Webpack or Parcel as part of a build script. If you're using create-react-app I think it's already wired in. If you want to adjust some of the settings, Prettier uses a simple JSON file called .prettierrc that belongs in the root of your project.
Example .prettierrc:
// Relaxes need for semicolons, lints for single quotes and requires trailing commas
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5"
}
I had installed tern_for_vim and YouCompleteMe for js completion this way.
1 install node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source ~/.nvm/nvm.sh
nvm install node
2 install tern_for_vim
$ cd ~/.vim/bundle
git clone https://github.com/marijnh/tern_for_vim
3 install YouCompleteMe
cd ~/.vim/bundle/YouCompleteMe
$ ./install.sh --clang-completer --tern-completer
4 edit .tern-project
vim .tern-project
{
"libs": [
"browser",
"underscore",
"jquery"
],
"plugins": {
"node": {}
}
}
Now to vim test.js.
The js completion pop up after inputing document. in test.js file.
Then to vim test.html
No js completion pop up after inputing document. in test.html file.
How to fix it?
Unfortunately this is not officially supported by tern. You can see the response in a closed issue
https://github.com/ternjs/tern_for_vim/issues/170
Because the parsing logic for separating HTML and scripts hasn't been implemented. This could be done as a plugin, if you want to take a shot at it, but it's out of scope for this repository.
But then there is another thread on SO which may help you
Using tern_for_vim plugin in HTML files
So best is to include your code in the html through a JS file and then edit the JS file. Else look at some other plugin/IDE environment. I would explore the below option as well
https://github.com/Shougo/deoplete.nvim#install
I'm unfamiliar with tern_for_vim and YouCompleteMe for js completion, however you could always use vim's built in omni-func completion.
If you add:
filetype on
filetype plugin on
set omnifunc=syntaxcomplete#Complete
to your vimrc file, you can then manually set the filetype of your html file to javascript with :set filetype=javascript whilst in vim.
Following that, when in insert mode, you can then use <C-x> followed by <C-o> to access javascript language specific omni completion.
The resulting completion menu is then navigable by the standard <C-p> for up and <C-n> for down hotkeys.
This, along with other bits of built in completion functionality are discussed in a nice thoughtbot talk.
Problem
I'm currently trying to build a 3D web app based on three.js.
I'm using neovim as my development environment and YouCompleteMe as a completion system.
I installed tern to complete JS, and I added .tern-project file like this.
{
"libs": [
"browser",
"ecmascript",
],
"loadEagerly": [
],
"plugins": {
"threejs": {}
}
}
I also copied threejs.js and threejs.json to my project's directory generated by tern-threejs.
However, YouCompleteMe doesn't show semantic completion compared to tern-threejs's demo codemirror
Comparison:
codemirror:
neovim:
Note: I can't see any completion at all.
What seems to be the problem?
threejs.js is a tern plugin file and threejs.json is a tern library file. plugin files should be copied in tern/plugin directory and library files needs to be placed within tern/defs directory. These two directory exists within tern directory.
With 'YouCompleteMe' installed this dir path is: ~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node_modules/tern. You only need to copy one of aforementioned files. Plugin file or lib file; and update your .tern-project file accordingly. so:
First ensure that you have enabled the Tern completer on YouCompleteMe. For example on my Mac, I had to run the following:
cd ~/.vim/bundle/YouCompleteMe
./install.py --tern-completer
See YouCompleteMe installation guide for details on how to do it on other environments.
Copy threejs.js then navigate to
~/.vim/YouCompleteMe/third_party/ycmd/third_party/tern-runtime/node_modules/tern/plugin/
and paste.
Update your project's .tern-project file as follows:
{
"libs": [
"browser",
"ecmascript",
],
"plugins": {
"es_modules": {},
"threejs": {}
}
}
Note that i've also included es_modules plugin (which is a plugin shipped with tern itself) as you are using ES6 module pattern system.
I love vim and want to keep using it to do web development although I am struggling setting up my .tern_project file with the correct libraries I need to do autocompletion. I am relatively new to JavaScript but what I have so far is making it a lot easier to learn.
There aren't many examples that I could find and I have tried to read the documentation but I do not know enough for it to be helpful. So far my .tern_project file looks like this:
{
"libs": [
"browser",
"ecma6"
],
"plugins": {
"requirejs": {
"baseURL": "./",
"paths": {}
}
}
}
I don't really know what the plugins do but I left them in for now, in libs the ecma6 really helped me with all the array methods (ie. forEach etc.). Now my question is how do I add stuff like console.table() to autocomplete?
Which library do I need to add to the .tern_project file?
Also, I am open to suggestions for better web development environments.
At this point all you've got is tern's default completion!!! Your .tern_project does not have any impact on completions that tern suggests because tern configuration file is .tern-project; Its Dash not underscore. so first rename it.
.tern-project is a json configuration file which tells tern what completions it should suggest through two property: libs and plugins.
plugins aren't much different from libs they tells tern to also suggest these completions you specify in addition to libs.
For example in your .tern-project file you've choose to use requirejs plugin. so if you use requirejs library which is a module loader and helps with writing client side modular code, then it completes variables, functions and methods from other modules.
console is a node's global. and to complete node stuff you should add node plugin. so your .tern-project file should be something like:
{
"libs": [
"browser",
"ecmascript"
],
"plugins": {
"node": {}
}
}
Note that i've used ecmascript in place of ecma6. in previous versions tern had ecma5 and ecma6 libs but in latest versions these two got combined in one lib named: ecmascript.
List of available tern libs:
browser
chai
ecmascript
jquery
react
underscore
You could always get an updated list of libs from tern js repository defs directory
List of available tern plugins :
angular
commonjs
complete_strings
doc_comment
es_modules
node
requirejs
webpack
You could always get an updated list of plugins from tern js repository plugin directory
As your javascript skills grow go add and play with libs and plugins and see what completions you get. Also note that you could have multiple .tern-project file. Tern will always search upward to root directory and uses the closest one. so you could configure completions on a project basis.
My app.json file of a Sencha touch 2 application contain.
"js": [
{
"path": "sdk/sencha-touch.js"
},
{"path": "js/mootools-1.2.5-core.js"}, // I want these files to be bundled too
{"path": "js/mootools-1.2.5.1-more.js"}, // <----------+
{"path": "js/soundmanager2-nodebug-jsmin.js"}, // <----+
... // <----+ and there are more.
...
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
Now I see when I invoke sencha app build production It compiles all the sencha classes into a giant app.js file. But all my other classes are just compressed to build directory. They are not concatenated. how can I include them in app.js?
F.A.Q.
Your json file is properly written, right?
A. Yes, app.json is written without any syntax error. The project builds successfully on invoking sencha app build production
After looking at the source code and talking with the devs behind Cmd, it appears that it is currently not possible.
However, because the build file is written in JavaScript, in theory, it wouldn't take much to modify it and add this functionality into Cmd.
You can find the Sencha Touch build file in:
CMD-ROOT/plugins/touch/current/app-build.js
Where CMD-ROOT is the location of the sencha command - which you can find out by using which sencha.
On my system (OSX), the path is:
/Users/Robert/bin/Sencha/Cmd/3.0.0.250/plugins/touch/current/app-build.js
Hopefully this is of some help to you.
Update
It appears that, after talking to another Cmd developer, this actually is possible. There are 2 steps you need to take to make it happen:
1) Add the skipFrameworkFile property into each JS resource you want to bundle. This tells the compiler to not copy the resource when your build your app.
{
"path": "resources/js/jquery.js",
"skipFrameworkFile": true
},
"path": "resources/js/jquery2.js",
"skipFrameworkFile": true
}
2) Require each of the files in your app.js file using the #require tag. This tells the compiler to include each of your files into your app.js file.
//#require resources/js/jquery.js
//#require resources/js/jquery2.js
For SenchaCmd 3.2, rdougan's solution didn't work for me. However, instead of using:
'skipFrameworkFile: true
I used
'x-bootstrap': true
(by looking at SenchaCmd source code) and it worked!
The other steps are the same as rdougan's
Hope this helps. Cheers