How to setup tern-vim in my project? - tern

I want to setup tern-vim in my project and followed this link https://github.com/ternjs/tern_for_vim/blob/master/doc/tern.txt.
After installation, I created a .tern-project file under the root directory of my project as below.
{
"libs": [
"browser",
"jquery"
],
"loadEagerly": [
"importantfile.js"
],
"plugins": {
"requirejs": {
"baseURL": "./",
"paths": {}
}
}
}
When I open a js file by vim command, I can't use any tern command as below:
|:TernDoc|...................... Look up Documentation
|:TernDocBrowse|................ Browse the Documentation
|:TernType|..................... Perform a type look up
|:TernDef|...................... Look up definition
|:TernDefPreview|............... Look up definition in preview
|:TernDefSplit|................. Look up definition in new split
|:TernDefTab|................... Look up definition in new tab
|:TernRefs|..................... Look up references
|:TernRename|................... Rename identifier
I will get Not an editor command error. Do I need to do any other configuration?

Related

stylelint on create-react-app #import-normalize throw error

I followed this doc to add CSS reset to my app.
https://create-react-app.dev/docs/adding-css-reset/#indexcss
But it showed this message:
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": null
}
How to fix this problem?it is annoying...
To fix this warning you just need to add this line to.vscode/settings.json inside your project (you can create this file if it doesn't already exist):
{
"css.lint.unknownAtRules": "ignore"
}
Source: https://create-react-app.dev/docs/adding-css-reset/#indexcss
For VS Code -
To make the VS Code recognise this custom CSS directive, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [],
"atDirectives": [
{
"name": "#import-normalize",
"description": "bring in normalize.css styles"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown at rule" warning. When you hover over "#import-normalize", you will see the description you set for it in custom.css-data.json
#import-normalize is a non-standard at-rule. From the rule's documentation:
This rule considers at-rules defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
However, the rule has an ignoreAtRules secondary option for exactly this use case, where you can list the non-standard imports you are using.
For example, in your package.json:
{
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}]
}
}
}
Or within your .stylelintrc file:
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}
}
}

How do I resolve import with absolute path?

What do I need to setup in brunch-config.js to be able to resolve absolute path from project's root folder? i.e
import { helper } from '/imports/utilities/helper'
The reason being is I have a legacy React app and it imports local files by using relative path. While I'm trying to use brunch, I need to figure out a way to setup brunch so that it understands the path without having to change the code.
I tried to use npm alias but not sure how it works
npm: {
aliases: {
'/imports': 'imports/**'
}
}
Found the solution with babel-plugin-module-resolver package.
Since all my codes are under /imports dir, in brunch-config.js I setup an alias based on their documentation:
plugins: {
babel: {
plugins: [
...,
["module-resolver", {
"root": ["./imports"],
"alias": {
"/imports": ([, path]) => `./imports${path}`,
}
}]
],
presets: [
...
],
}
},
That way, if I do import Screen from '/imports/components/screens' it will resolve the file under ./imports/components/screens
You can set the alias in .babelrc too but you might want to use regex instead.

can't seem to get static route with kraken.js

I'm trying to upgrade an existing express site to use kraken.js
I've got my dynamic pages loading ok (so far), but I can't seem to serve static files.
Looking at the example, pages, it seems simple enough that I just have to add
"middleware": {
"static": {
"arguments": [ "path: ./client" ]
}
}
In my config.json file. The file I'm trying to serve is ./client/build/js/bundle.js, and I can confirm that the file exists in the folder. It is NOT in a ./public folder.
What do I need to do to get kraken (or kraken.js static-serve) to find my static files?
I've placed the file in a ./public/client/build/js/bundle.js and kraken has no problem finding the file in that location.
I think you might be missing the "module" member of the middleware object. My current Kraken-generated static middleware config object looks like this:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
OK, I found out how to make it work. Notice how in your config that "public" isn't in there? That meant it was being pre-pended or configured somewhere else. That somewhere else is in /node-modules/kraken-js/config/config.json. I amended it to look like this:
"static": {
"enabled": true,
"priority": 40,
"module": {
"name": "serve-static",
"arguments": [ "path:./public", "path:./client" ]
}
},
Then in your regular /config/config.json I edited the static object to look like this:
"static": {
"module": {
"arguments": [ "path:./.build", "path:./build" ]
}
},
Notice that in the second argument there is not a "." before build.
Finally, I used script tags that looked like this in the master layout:
<script src="/js/test.js"></script>
So, from your root project directory I have /client/build/js/test.js and test.js loads correctly.
Also, there is one more way to do it that is easier and doesn't require mucking about in the kraken source. In your main index.js file you can do this:
app = module.exports = express();
app.use(kraken(options));
app.use(express.static('client')); // Add this line
Days, then weeks, then months went by, and nothing worked.
I should have noted that I am not using Yoeman, and we use gulp at work, which may have been part of the problem.
The solution turned out to be
"middleware": {
"static": {
"route": "/public"
},
which looks very different to any of the documentation from kraken. Hope this helps somebody.

Create different versions form one bootstrap file with require.js

I develop an iPad/iPhone App web app. Both share some of the resources. Now I wanna build a bootstrap js that looks like this:
requirejs(['app'], function(app) {
app.start();
});
The app resource should be ipadApp.js or iphoneApp.js. So I create the following build file for the optimizer:
{
"appDir": "../develop",
"baseUrl": "./javascripts",
"dir": "../public",
"modules": [
{
"name": "bootstrap",
"out": "bootstrap-ipad.js",
"override": {
"paths": {
"app": "ipadApp"
}
}
},
{
"name": "bootstrap",
"out": "bootstrap-iphone.js",
"override": {
"paths": {
"app": "iphoneApp"
}
}
}
]
}
But this doesn't seems to work. It works with just one module but not with the same module with different outputs.
The only other solution that came in my mind was 4 build files which seems a bit odd. So is there a solution where i only need one build file?
AFAIK the r.js optimizer can only output a module with a given name once - in your case you are attempting to generate the module named bootstrap twice. The author of require.js, #jrburke made the following comment on a related issue here:
...right now you would need to generate a separate build command for each script being targeted, since the name property would always be "almond.js" for each one.
He also suggests:
...if you wanted just one build file to run, you could create a node program and drive the optimizer multiple times in one script file. This example shows using requirejs as a module and calling requirejs.optimize().
I took a similar approach in one of my projects - I made my build.js file an ERB template and created a Thor task that ran through my modules and ran r.js once for each one. But #jrburke's solution using node.js is cleaner.

Error6 while trying to use sublime text to msbuild

I'm trying to use msbuild with my sublime project. I created the build file suggested here and the following is my project file
{
"folders":
[
{
"path": "/W/MyOrg/MyApp",
"folder_exclude_patterns": ["_ReSharper.*", "bin", "obj"]
}
]
}
I select the msbuild40 build system and hit Build and get the output:
[Error 6] The handle is invalid
[Finished]
I'm not even sure if this is a python or an msbuild error. Which is it, how can I fix it, and whats a good way to troubleshoot this sort of stuff in the future?
Update
I tried updating my project to the following and using that build and still no dice
{
"folders":
[
{
"path": "/W/MyOrg/MyApp",
"folder_exclude_patterns": ["_ReSharper.*", "bin", "obj"]
}
],
"build_systems":
[
{
"name": "msbuild",
"cmd": ["c:\\Windows\\Microsoft.NET\\Framework\\v4.0.30319\\MSBuild.exe", "w:\\MyOrg\\MyApp\\MyApp.sln"]
}
]
}
Turns out that this happens whenever you start sublime from command line ( I was starting it via a powershell alias).
You can fix this by using a batch file and the START command. I created sublime_text.bat:
START "Sublime Text 2" "C:\Program Files\Sublime Text 2\sublime_text.exe" %*
and set my powershell alias to that bat file. Now everything works.