Today I install sublime text 3.
I install plugin SublimeCodeIntel. This plugin help me for autocomplete functions in php. In my projects I use Yii framework. Can I add yii framework to this plugin.
You should be able to. First, open Preferences -> Package Settings -> SublimeCodeIntel -> Settings-Default, copy the entire contents, open ... -> SublimeCodeIntel -> Settings-User, and paste the contents into it. You can now close Settings-Default.
Scroll all the way down to the bottom and customize the settings in the "PHP" array. Set "php" to the full path to the php or php.exe binary on your system. In "codeintel_scan_extra_dir", add directories to the list of folders you'd like to scan. For example, you could put ["/path/to/project/vendor/yiisoft"], or just ["/path/to/project/vendor"] if you want to include everything in that directory for code analysis.
If you set up a separate Sublime project for each job, you can add this information to your .sublime-project file. With your project open, select Project -> Edit Project, and set it like this:
{
"folders":
[
{
"follow_symlinks": true,
"path": "/home/mattdmo/Development/Client1/site"
}
],
"settings":
[
{
"codeintel_language_settings": {
"PHP": {
"php": "/usr/local/bin/php",
"codeintel_scan_extra_dir": ["vendor"],
"codeintel_scan_files_in_project": true,
"codeintel_max_recursive_dir_depth": 25,
"codeintel_scan_exclude_dir":["css", "img"]
}
}
}
]
}
Paths are relative to the directory where the .sublime-project file is stored. Read the above link and the official docs for more information. If you don't put a certain setting in the project file (for example, the "codeintel_scan_files_in_project" setting), its value will be taken from the user settings you configured above, or the plugin's default settings you opened initially. So, set base values you always use in the plugin's user settings, then just set project-specific things in the project file.
Related
I'm trying to provide a link to a gpg file on a webpage. Irrespective of relative path or absolute (static asset), on clicking the link, the index page keeps re-appearing. I don't want to use js to read the contents of gpg and render that. Instead, I want the browser to handle opening of the file (either open or download). Not working with other file types as well.
I have tried adding webpack config for this particular file type (file-loader/url-loader). Using raw-loader I can read the contents of the file, but I don't need that. Tried adding the file as an import.
To reproduce, create new project with vue-cli. Add this to App.vue template: Link
Create vue.config.js:
chainWebpack: config => {
config.module
.test(/\.gpg$/)
.use('file-loader')
.loader('file-loader')
.end()
}
}
Kindly suggest a way to include links to file present on the same domain. I don't want the vue app to handle rendering of such files.
In Vue.js you have the possibility to use the # in a path file as a shortcut to your src folder. It is nice because all your files have an absolute path.
However I don't manage to find a way to configure WebStorm to understand that and allow me to follow and check if the file exist when using it.
Example :
import Business from '#/components/Business/Business'
Writing that I want WebStorm to tell me if the file does not exists and to allow me to go to that file directly.
I did not manage to find any answer about it and neither managed to find a way to do it in the IDE.
For vue-cli3, you need to specify a full path to node_modules/#vue/cli-service/webpack.config.js as a webpack configuration file in Settings | Languages & Frameworks | JavaScript | Webpack.
Note that this only works for JavaScript; webpack aliases are not resolved when using components written in TypeScript, path mappings in tsconfig.json should be used instead
In phpstorm 2020.3.3, I could fix this by
Opening Settings > Languages & Frameworks > JavaScript > Webpack and choose "Automatically"
Once saved, this opens a popup asking to run webpack configuration. Click "Trust project and run"
Fixed!
Webstorm already supports resolving alias. Webstorm read your webpack.config.js in background.
If you're using vue-cli 3, we don't have webpack.config.js, but you can create webpack.config.js file manually
module.exports = {
resolve: {
alias: {
"#": require("path").resolve(__dirname, "src") // change this to your folder path
}
}
};
webstorm will resolve it automatically
vue-cli3 you can select node_modules/#vue/cli-service/webpack.config.js as webstorm configuration file Settings > Languages & Frameworks > JavaScript > Webpack.
or create webpack.config.js in the root directory, content is
const resolve = dir => require('path').join(__dirname, dir);
module.exports = {
resolve: {
alias: {
'#': resolve('src')
}
}
};
And then as webstorm configuration file.
I'm looking for the best way to arrange my code base with common resources shared between different projects. I have three aurelia apps. In each one, I added some resources in its resources folder (custom elements, attributes, etc). When I needed one already wrote in another project, I just pasted it. Now I have time to refacto, I'd like to move all this resources in a dedicated repository. Then I want to be able to pick only the resources I need in each project.
I've tried by putting all me resources in a repo with a gulp build task from aurelia skeleton which allow me to build AMD modules of all my modules. Then, I've been able to load some modules individually by adding them in aurelia.json. For exemple for an attribute:
{
"name": "aurelia-resources-progress-button",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/attributes",
"main": "progress-button"
}
or a custom element:
{
"name": "aurelia-resources-avatar-upload",
"path": "../node_modules/SHG-aurelia-resources/dist/amd/resources/elements/avatar-upload",
"main": "avatar-upload",
"resources": [
"avatar-upload.html",
"avatar-upload.css"
]
}
It worked like a charme but it failed for a value converter which import a module from relative path.
The file is located in :
"projectRoot/node_modules/SHG-aurelia-resources/dist/amd/resources/value-converters/duration-format.js",
it import from '../utils./strings'
and
I get the following error when I au run:
"Error: ENOENT: no such file or directory, open
'/Users/hadrien/Documents/dev/SportHeroes/united-heroes/src/resources/utils/strings.js'".
The strange thing is when I require a relative module from a template (like in my progress-button custom attribute) there is no problem.
I don't want to make a plugin because I don't want to load every modules of my repo. What I'd like, if it is possible, would be to be able to set .feature('../node_modules/path/resources') and load them like I load my local resources.
What should I do ?
I'm answering the question as reworded in the comments above.
If you have an npm package, you can simply require in resources from it using a require element. This npm package could package itself as a plugin, and you simply choose not to load it that way as you only want a subset up the stuff it provides.
I've created a set of sample projects that show this off: https://github.com/AshleyGrant/sample-app-so41961759
This application has a dependency on https://github.com/AshleyGrant/sample-resources-so41961759/
This dependency packages itself as a plugin, but it also can be consumed piecemeal as I am doing in the application by only using one of the two resources the plugin has. Note that the other resource isn't loaded since I'm not using it.
This is what it looks like in the app when I pull in a resource from within the dependency:
<template>
<require from="sample-resources-so41961759/custom-elements/my-echo"></require>
<h1>${message}</h1>
<my-echo say="Echo!"></my-echo>
</template>
I can't seem to convince Visual Studio Code to resolve absolute TypeScript module paths. Relative paths work, but absolute don't. I would like Visual Studio Code to resolve module paths from ./src folder on.
// This works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';
// This doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';
// This works, but it is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';
The last one of course doesn't count as each developer's project path is highly likely different. But even if we'd all set a system variable %ProjectXRoot% we can't use this variable in the code. Visual Studio Code will not resolve such module path. I've tried.
// Won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';
Currently installed versions
• TypeScript: 1.8.10
• VSCode: 1.1.1
Question
I've tried to somehow configure Visual Studio Code to resolve absolute module paths, but I can't seem to do so. I've tried configuring tsconfig.json (in the project root) by adding baseUrl in two different places.
{
...
"compilerOptions": {
"baseUrl": "./src", // Doesn't work
...
},
"baseUrl": "./src", // Doesn't work either
...
}
I've tried values like src, ./src and ./src/, but none of them work in any of the upper configuration places.
So how does one configure Visual Studio Code to resolve absolute module paths from a certain folder?
If that's not possible, it would be at least better to resolve absolute paths from project root. How does Visual Studio Code determine that? Is it where you Open Folder or is it where the .vscode folder is?
But it would still be a viable solution for absolute paths. I've tried using ~ similar to Visual Studio, but to no avail either.
(Unresolved)
--
As steinso points out in his answer, all modules starting with /, ./ or ../ are considered relative. Especially the first one surprised me completely as I usually consider that a project root-relative path.
But this fact basically means that the main question now becomes: How can I provide module imports as absolute paths (from some project root folder path) at all? Starting paths with slashes usually meant absolute, but in this case it doesn't.
Even when I set compiler option moduleResolution to classic (so module resolution wont be looking into node_modules folder) the second set of imports above should actually all work as per Microsoft's linked document. But for some reason I still get red squiggly lines in Visual Studio Code and errors during compilation.
So how can I import a specific project module without providing an exact relative path to it, but rather just its own project-relative path?
To be able to use absolute paths from import in TypeScript using Visual Studio Code you should be using next version of TypeScript - typescript#next which is TypeScript v2. For that do the following:
Install typescript#next via npm. For installing TypeScript v2.x
npm i typescript#next -D
In Visual Studio Code
i) Go to menu File → Preferences → Workspace Settings (This generates the .vscode directory at the project root and initializes the settings.json file.)
ii) Put the following key:value pair in settings.json file
"typescript.tsdk": "node_modules/typescript/lib"
In tsconfig.json add following key:value pair to 'compilerOptions'
{
"compilerOptions" : {
"baseUrl": "./",
"paths" : {
"src/*": ["./src/*"]
}
}
}
Reload Visual Studio Code
If you have the following directory structure:
+ node_modules
+ src
| + app
| | + shared
| | | -service.ts
| | -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html
Then to import /src/app/shared/service.ts from main.ts you could now import {} from 'src/app/shared/service;
If you are using webpack and ts-loader for transpiling the .ts files, you should add following to the resolve section of webpack.config.js configuration file.
resolve: {
extensions: ['', '.js', '.ts'],
alias: {
"src": path.resolve('./src')
}
}
Please refer to this for absolute module resolution.
You need to specify:
"compilerOptions": {
"moduleResolution": "classic"
...
The base path will then default to the directory of your tsconfig.json, add rootDir in compilerOptions to change it. EDIT: This does not seem to have any effect.
This will allow imports such as:
import { Interface } from 'api/interfaces';
Note that any path starting with . or ../ or / is considered relative.
Edit: Module resolution
Be aware of how the modules are resolved. The module path is still some what relative to the current file.
Let's use an example to illustrate for the current scenario:
Let's say you import { Interface } from "api/interfaces", from source file /src/views/View.ts. Typescript would then look for the module in the following paths:
/src/views/api/interfaces.ts
/src/api/interfaces.ts
/api/interfaces.ts
Note: how this still makes it relative, imagine if you import {Home} from "Home/Home" when you are located in /src/views/View.ts. In this case it would work even if the path is /src/views/Home/Home.
These are the possible resolutions:
/src/views/Home/Home -> Note how this would work.
/src/Home/Home
/Home/Home
More information can be found here:
http://www.typescriptlang.org/docs/handbook/module-resolution.html
If you've set up paths correctly:
{
…
"compilerOptions": {
…
"baseUrl": ".",
"paths": {
"~/*": ["app/assets/javascript/*"],
"*": ["node_modules/*", "app/assets/javascript/packs/*"]
}
}
}
And if you're still having issues, maybe try reloading Visual Studio Code: Cmd/Ctrl + Shift + P and type reload window.
It just randomly stopped working for me and is reporting problems. I spent around 20 minutes online trying to figure out what changed, only to realize that Visual Studio Code can glitch on absolute path resolution.
I have project with a lot of less files, I'm used in Web compiler (developer Mads Kristensen) Extension for visual studio 2015.
my way to create compilerconfig.json is to compile single file and then edit manually the file, to work with all the other less files in the project.
I'm sure it's wrong way...
I don't understand, how I can to create new compilerconfig.json file that include all the less files in existing project?
because in this situation when I added new less file the only way to add file is go to compilerconfig.json and add it manually.
we don't have option to create new compilerconfig.json with all the less files in automatically way?
Less Web Compiler
All you need to do after adding a new .less file to your project is right click the new .less file and "Compile File" should be the only option, by selecting that option it will then be added to the compilerconfig.json file. This will not add all the .less files in the project to the config, with a single click, but it will automatically add them with a quick click on each file, and you wont have to be adding them manually.
BEFORE:
[
{
"outputFile": "less/site.css",
"inputFile": "less/site.less"
}
]
AFTER:
[
{
"outputFile": "less/site.css",
"inputFile": "less/site.less"
},
{
"outputFile": "less/theme.css",
"inputFile": "less/theme.less"
}
]
You can also recompile all the files from the Task Runner Explorer window (View -> Other Windows -> Task Runner Explorer). There you should see the compilerconfig.json, below that you will see "LESS", you can "Run" that to compile all, or a select a single file. You can also compile on build.
An alternative method would be to use a gulp file. You can set up a task to get all the less files in your project, without another thought to it after setting it up.