├── .eslintrc.json ├── .gitignore ├── .travis.yml ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── .vscodeignore ├── CHANGELOG.md ├── README.md ├── images ├── vue-peek-demo.gif └── vue-peek-icon.png ├── package.json ├── src ├── PeekFileDefinitionProvider.ts └── extension.ts ├── test ├── extension.test.ts └── index.ts ├── tsconfig.json └── vsc-extension-quickstart.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": false, 4 | "commonjs": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | "parserOptions": { 9 | "ecmaFeatures": { 10 | "jsx": true 11 | }, 12 | "sourceType": "module" 13 | }, 14 | "rules": { 15 | "no-const-assign": "warn", 16 | "no-this-before-super": "warn", 17 | "no-undef": "warn", 18 | "no-unreachable": "warn", 19 | "no-unused-vars": "warn", 20 | "constructor-super": "warn", 21 | "semi": [2, "never"], 22 | "valid-typeof": "warn" 23 | } 24 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules 3 | .vscode 4 | .vscode-test 5 | *.log -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | os: 5 | - linux 6 | install: 7 | - npm install 8 | script: 9 | - npm run build -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ], 11 | "stopOnEntry": false, 12 | "sourceMaps": true, 13 | "outFiles": [ "${workspaceRoot}/out/src/**/*.js" ], 14 | "preLaunchTask": "npm" 15 | }, 16 | { 17 | "name": "Launch Tests", 18 | "type": "extensionHost", 19 | "request": "launch", 20 | "runtimeExecutable": "${execPath}", 21 | "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ], 22 | "stopOnEntry": false, 23 | "sourceMaps": true, 24 | "outFiles": [ "${workspaceRoot}/out/test/**/*.js" ], 25 | "preLaunchTask": "npm" 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "out": false // set this to true to hide the "out" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "out": true // set this to false to include "out" folder in search results 8 | } 9 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // Available variables which can be used inside of strings. 2 | // ${workspaceRoot}: the root folder of the team 3 | // ${file}: the current opened file 4 | // ${fileBasename}: the current opened file's basename 5 | // ${fileDirname}: the current opened file's dirname 6 | // ${fileExtname}: the current opened file's extension 7 | // ${cwd}: the current working directory of the spawned process 8 | 9 | // A task runner that calls a custom npm script that compiles the extension. 10 | { 11 | "version": "0.1.0", 12 | 13 | // we want to run npm 14 | "command": "npm", 15 | 16 | // the command is a shell script 17 | "isShellCommand": true, 18 | 19 | // show the output window only if unrecognized errors occur. 20 | "showOutput": "silent", 21 | 22 | // we run the custom script "compile" as defined in package.json 23 | "args": ["run", "compile", "--loglevel", "silent"], 24 | 25 | // The tsc compiler is started in watching mode 26 | "isBackground": true, 27 | 28 | // use the standard tsc in watch mode problem matcher to find compile problems in the output. 29 | "problemMatcher": "$tsc-watch" 30 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | out/test/** 4 | test/** 5 | src/** 6 | **/*.map 7 | .gitignore 8 | tsconfig.json 9 | vsc-extension-quickstart.md 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to the "vue-peek" extension will be documented in this file. 3 | 4 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 5 | 6 | ## [Unreleased] 7 | - Initial release -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vscode-vue-peek 2 | [![Version](https://vsmarketplacebadge.apphb.com/version/dariofuzinato.vue-peek.svg)](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek) 3 | [![Build Status](https://travis-ci.org/fussinatto/vscode-vue-peek.svg?branch=master)](https://travis-ci.org/fussinatto/vscode-vue-peek) 4 | 5 | This extension extends Vue code editing with `Go To Definition` and `Peek Definition` support for components and filenames in single-file components with a *`.vue`* extension. 6 | It allows quickly jumping to or peeking into files that are referenced as components (from template), or as module imports (from script). 7 | ![Demo](images/vue-peek-demo.gif) 8 | 9 | ## Features 10 | 11 | The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes and IDs). This includes: 12 | 13 | * Peek: load the css file inline and make quick edits right there. (`Ctrl+Shift+F12`) 14 | * Go To: jump directly to the css file or open it in a new editor (`F12`) 15 | * Hover: show the definition in a hover over the symbol (`Ctrl+hover`) 16 | 17 | ## Customize supported languages 18 | There are 2 settings options that allows you to customize targeted files and language in which plugin is activated. By default they look like this: 19 | ``` 20 | "vue-peek.targetFileExtensions": [ 21 | ".vue", 22 | ], 23 | "vue-peek.supportedLanguages": [ 24 | "vue" 25 | ] 26 | ``` 27 | You can add support for any file extension you like. To allow plugin to search for **.js** files: go to settings, search for _vue-peek_ and add **.js** extension to _targetFileExtensions_ option. 28 | If you'd like for plugin to be activated in other languages, add that extension (i.e. "js") to _supportedLanguages_ array. 29 | 30 | ## Contributing 31 | 32 | Contributions and suggestions are greatly appreciated. 33 | 34 | ## Release Notes 35 | 36 | ### 1.0.2 37 | 38 | * Add config title 39 | * Add variable extension to `component/index` files 40 | 41 | ### 1.0.1 42 | 43 | * Fixes #1: referencing `component/index.vue` files 44 | 45 | ### 1.0.0 46 | 47 | * Initial release 48 | 49 | ### Thanks 50 | Inspired by [vscode file peek](https://github.com/abierbaum/vscode-file-peek) 51 | 52 | **Enjoy!** 53 | -------------------------------------------------------------------------------- /images/vue-peek-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzinato/vscode-vue-peek/2938392a105fc2c157693ca5ab740737128a3e7e/images/vue-peek-demo.gif -------------------------------------------------------------------------------- /images/vue-peek-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fuzinato/vscode-vue-peek/2938392a105fc2c157693ca5ab740737128a3e7e/images/vue-peek-icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-peek", 3 | "displayName": "Vue Peek", 4 | "description": "Allows peek and goto definition for Vue single-file components.", 5 | "version": "1.0.2", 6 | "publisher": "dariofuzinato", 7 | "icon": "images/vue-peek-icon.png", 8 | "license": "MIT", 9 | "keywords": [ 10 | "vue", 11 | "peek", 12 | "definition", 13 | "file" 14 | ], 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/fussinatto/vscode-vue-peek" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/fussinatto/vscode-vue-peek/issues" 21 | }, 22 | "engines": { 23 | "vscode": "^1.14.0" 24 | }, 25 | "categories": [ 26 | "Other" 27 | ], 28 | "activationEvents": [ 29 | "*" 30 | ], 31 | "main": "./out/src/extension", 32 | "contributes": { 33 | "commands": [], 34 | "configuration": { 35 | "title": "Vue Peek extension configuration", 36 | "properties": { 37 | "vue-peek.supportedLanguages": { 38 | "type": "array", 39 | "default": [ 40 | "vue" 41 | ], 42 | "items": { 43 | "type": "string" 44 | }, 45 | "description": "A list of vscode language names where the extension should be used." 46 | }, 47 | "vue-peek.targetFileExtensions": { 48 | "type": "array", 49 | "default": [ 50 | ".vue" 51 | ], 52 | "items": { 53 | "type": "string" 54 | }, 55 | "description": "A list of extensions that should be tried for finding peeked files. These are tried in order as further extensions of the potential file name and also as alternative file endings instead of the existing file extension (if available)." 56 | } 57 | } 58 | } 59 | }, 60 | "scripts": { 61 | "vscode:prepublish": "tsc -p ./", 62 | "compile": "tsc -watch -p ./", 63 | "build": "tsc -p ./", 64 | "postinstall": "node ./node_modules/vscode/bin/install", 65 | "test": "node ./node_modules/vscode/bin/test" 66 | }, 67 | "devDependencies": { 68 | "typescript": "^2.0.3", 69 | "vscode": "^1.0.0", 70 | "mocha": "^2.3.3", 71 | "@types/node": "^6.0.40", 72 | "@types/mocha": "^2.2.32" 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/PeekFileDefinitionProvider.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | 3 | export default class PeekFileDefinitionProvider implements vscode.DefinitionProvider { 4 | targetFileExtensions: string[] = []; 5 | 6 | constructor(targetFileExtensions: string[] = []) { 7 | this.targetFileExtensions = targetFileExtensions; 8 | } 9 | 10 | getComponentName(position: vscode.Position): String[] { 11 | const doc = vscode.window.activeTextEditor.document; 12 | const selection = doc.getWordRangeAtPosition(position); 13 | const selectedText = doc.getText(selection); 14 | let possibleFileNames = [], 15 | altName = '' 16 | 17 | selectedText.match(/\w+/g).forEach(str => { 18 | return altName += str[0].toUpperCase() + str.substring(1); 19 | }) 20 | 21 | this.targetFileExtensions.forEach(ext => { 22 | possibleFileNames.push(selectedText + ext) 23 | possibleFileNames.push(selectedText + '/index' + ext) 24 | possibleFileNames.push(altName + ext) 25 | possibleFileNames.push(altName + '/index' + ext) 26 | }) 27 | 28 | return possibleFileNames; 29 | } 30 | 31 | searchFilePath(fileName: String): Thenable { 32 | return vscode.workspace.findFiles(`**/${fileName}`, '**/node_modules'); // Returns promise 33 | } 34 | 35 | provideDefinition( 36 | document: vscode.TextDocument, 37 | position: vscode.Position, 38 | token: vscode.CancellationToken 39 | ): Promise { 40 | 41 | let filePaths = []; 42 | const componentNames = this.getComponentName(position); 43 | const searchPathActions = componentNames.map(this.searchFilePath); 44 | const searchPromises = Promise.all(searchPathActions); // pass array of promises 45 | 46 | return searchPromises.then((paths) => { 47 | filePaths = [].concat.apply([], paths); 48 | 49 | if (filePaths.length) { 50 | let allPaths = []; 51 | filePaths.forEach(filePath => { 52 | allPaths.push(new vscode.Location(vscode.Uri.file(`${filePath.path}`),new vscode.Position(0,1) )) 53 | }); 54 | return allPaths; 55 | } else { 56 | return undefined; 57 | } 58 | }, (reason) => { 59 | return undefined; 60 | }); 61 | } 62 | } -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | import * as vscode from 'vscode'; 3 | import PeekFileDefinitionProvider from './PeekFileDefinitionProvider' 4 | 5 | const languageConfiguration: vscode.LanguageConfiguration = { 6 | wordPattern: /(\w+((-\w+)+)?)/ 7 | } 8 | 9 | export function activate(context: vscode.ExtensionContext) { 10 | 11 | const configParams = vscode.workspace.getConfiguration('vue-peek'); 12 | const supportedLanguages = configParams.get('supportedLanguages') as Array; 13 | const targetFileExtensions = configParams.get('targetFileExtensions') as Array; 14 | 15 | context.subscriptions.push(vscode.languages.registerDefinitionProvider( 16 | supportedLanguages, 17 | new PeekFileDefinitionProvider(targetFileExtensions) 18 | )); 19 | 20 | /* Provides way to get selected text even if there is dash 21 | * ( must have fot retrieving component name ) 22 | */ 23 | context.subscriptions.push(vscode.languages.setLanguageConfiguration( 24 | 'vue', 25 | languageConfiguration) 26 | ); 27 | } 28 | 29 | // this method is called when your extension is deactivated 30 | export function deactivate() { 31 | } 32 | -------------------------------------------------------------------------------- /test/extension.test.ts: -------------------------------------------------------------------------------- 1 | // 2 | // Note: This example test is leveraging the Mocha test framework. 3 | // Please refer to their documentation on https://mochajs.org/ for help. 4 | // 5 | 6 | // The module 'assert' provides assertion methods from node 7 | import * as assert from 'assert'; 8 | 9 | // You can import and use all API from the 'vscode' module 10 | // as well as import your extension to test it 11 | import * as vscode from 'vscode'; 12 | import * as myExtension from '../src/extension'; 13 | 14 | // Defines a Mocha test suite to group tests of similar kind together 15 | suite("Extension Tests", () => { 16 | 17 | // Defines a Mocha unit test 18 | test("Something 1", () => { 19 | assert.equal(-1, [1, 2, 3].indexOf(5)); 20 | assert.equal(-1, [1, 2, 3].indexOf(0)); 21 | }); 22 | }); -------------------------------------------------------------------------------- /test/index.ts: -------------------------------------------------------------------------------- 1 | // 2 | // PLEASE DO NOT MODIFY / DELETE UNLESS YOU KNOW WHAT YOU ARE DOING 3 | // 4 | // This file is providing the test runner to use when running extension tests. 5 | // By default the test runner in use is Mocha based. 6 | // 7 | // You can provide your own test runner if you want to override it by exporting 8 | // a function run(testRoot: string, clb: (error:Error) => void) that the extension 9 | // host can call to run the tests. The test runner is expected to use console.log 10 | // to report the results back to the caller. When the tests are finished, return 11 | // a possible error to the callback or null if none. 12 | 13 | var testRunner = require('vscode/lib/testrunner'); 14 | 15 | // You can directly control Mocha options by uncommenting the following lines 16 | // See https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options for more info 17 | testRunner.configure({ 18 | ui: 'tdd', // the TDD UI is being used in extension.test.ts (suite, test, etc.) 19 | useColors: true // colored output from test results 20 | }); 21 | 22 | module.exports = testRunner; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "outDir": "out", 6 | "lib": [ 7 | "es6" 8 | ], 9 | "sourceMap": true, 10 | "rootDir": "." 11 | }, 12 | "exclude": [ 13 | "node_modules", 14 | ".vscode-test" 15 | ] 16 | } -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your first VS Code Extension 2 | 3 | ## What's in the folder 4 | * This folder contains all of the files necessary for your extension 5 | * `package.json` - this is the manifest file in which you declare your extension and command. 6 | The sample plugin registers a command and defines its title and command name. With this information 7 | VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. 8 | * `src/extension.ts` - this is the main file where you will provide the implementation of your command. 9 | The file exports one function, `activate`, which is called the very first time your extension is 10 | activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 11 | We pass the function containing the implementation of the command as the second parameter to 12 | `registerCommand`. 13 | 14 | ## Get up and running straight away 15 | * press `F5` to open a new window with your extension loaded 16 | * run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World` 17 | * set breakpoints in your code inside `src/extension.ts` to debug your extension 18 | * find output from your extension in the debug console 19 | 20 | ## Make changes 21 | * you can relaunch the extension from the debug toolbar after changing code in `src/extension.ts` 22 | * you can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes 23 | 24 | ## Explore the API 25 | * you can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts` 26 | 27 | ## Run tests 28 | * open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Launch Tests` 29 | * press `F5` to run the tests in a new window with your extension loaded 30 | * see the output of the test result in the debug console 31 | * make changes to `test/extension.test.ts` or create new test files inside the `test` folder 32 | * by convention, the test runner will only consider files matching the name pattern `**.test.ts` 33 | * you can create folders inside the `test` folder to structure your tests any way you want --------------------------------------------------------------------------------