VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


JS, CSS, HTML 파일 또는 디렉토리 내의 파일에 대해서 코드를 축소해 주는 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=HookyQR.minify



파일을 선택 후 Minify 시 {파일명|디렉토리명}.min.[js|css|html] 형식으로 파일을 생성해 줍니다.


원본 : index.html


축소 : index.min.html

저작자표시

'언어 > CSS & HTML' 카테고리의 다른 글

Highlight Matching Tag - 매칭되는 태그 강조  (0) 2019.01.24
IntelliSense for CSS class names in HTML - CSS Class 자동 완성  (0) 2018.10.07
HTMLHint - HTML 코드 분석  (0) 2018.10.06
Bootstrap v4 Snippets - 부트 스트랩 스니펫  (0) 2018.10.01
Font Awesome Autocomplete - 폰트 어썸 자동완성  (0) 2018.10.01

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


Linting, 디버깅, Intellisense, 코드 포맷팅, 리팩토링, 유닛 테스트, 스니펫을 지원하는 Python 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=ms-python.python



Python 이 설치되어 있어야 합니다.





Useful commands

Open the Command Palette (Command+Shift+P on macOS and Ctrl+Shift+P on Windows/Linux) and type in one of the following commands:

CommandDescription
Python: Select InterpreterSwitch between Python interpreters, versions, and environments.
Python: Create TerminalCreate a VS Code terminal with the selected Python interpreter (environment) activated.
Python: Start REPLStart an interactive Python REPL using the selected interpreter in the VS Code terminal.
Python: Run Python File in TerminalRuns the active Python file in the VS Code terminal. You can also run a Python file by right-clicking on the file and selecting Run Python File in Terminal.
Python: Select LinterSwitch from PyLint to flake8 or other supported linters.

To see all available Python commands, open the Command Palette and type Python.


Supported locales

The extension is available in multiple languages thanks to external contributors (if you would like to contribute a translation, see the pull request which added Italian):

  • de
  • en
  • es
  • fr
  • it
  • ja
  • ko-kr
  • pt-br
  • ru
  • zh-cn
  • zh-tw


Feature details

  • IDE-like features
    • Automatic indenting
    • Code navigation ("Go to", "Find all" references)
    • Code definition (Peek and hover definition, View signatures)
    • Rename refactoring
    • Sorting import statements (use the Python: Sort Imports command)
  • Intellisense and autocomplete (including PEP 484 and PEP 526 support)
    • Ability to include custom module paths (e.g. include paths for libraries like Google App Engine, etc.; use the setting python.autoComplete.extraPaths = [])
  • Code formatting
    • Auto formatting of code upon saving changes (default to 'Off')
    • Use either yapf, autopep8, or Black for code formatting (defaults to autopep8)
  • Linting
  • Debugging
    • Watch window
    • Evaluate expressions
    • Step through code ("Step in", "Step out", "Continue")
    • Add/remove breakpoints
    • Local variables and arguments
    • Multi-threaded applications
    • Web applications (such as Flask & Django, with template debugging)
    • Expanding values (viewing children, properties, etc)
    • Conditional breakpoints
    • Remote debugging (over SSH)
    • Google App Engine
    • Debugging in the integrated or external terminal window
    • Debugging as sudo
  • Unit testing
    • Support for unittest, pytest, and nose
    • Ability to run all failed tests, individual tests
    • Debugging unit tests
  • Snippets
  • Miscellaneous
    • Running a file or selected text in python terminal
  • Refactoring
    • Rename refactorings
    • Extract variable refactorings
    • Extract method refactorings
    • Sort imports


저작자표시

'언어 > Python' 카테고리의 다른 글

Django - 장고 스니펫  (0) 2018.11.17

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


Go 에 대해 풍부한 언어 지원을 위한 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=ms-vscode.Go




Go 가 설치되어 있어야 합니다. 

현재 설치된 Go path 는 Go: Current GOPATH 명령어로 확인 가능합니다.

IntelliSense

  • Auto Completion of symbols as you type (using gocode)
  • Signature Help for functions as you type (using gogetdoc or godef+godoc)
  • Quick Info on the symbol as you hover over it (using gogetdoc or godef+godoc)

Code Navigation

  • Go to or Peek Definition of symbols (using gogetdoc or godef+godoc)
  • Find References of symbols and Implementations of interfaces (using guru)
  • Go to symbol in file or see the file outline (using go-outline)
  • Go to symbol in workspace (using go-symbols)
  • Toggle between a Go program and the corresponding test file.

Code Editing

  • Code Snippets for quick coding
  • Format code on file save as well as format manually (using goreturns or goimports or gofmt)
  • Symbol Rename (using gorename. Note: For Undo after rename to work in Windows you need to have difftool in your path)
  • Add Imports to current file (using gopkgs)
  • Add/Remove Tags on struct fields (using gomodifytags)
  • Generate method stubs for interfaces (using impl)
  • Fill struct literals with default values (using fillstruct)

Diagnostics

  • Build-on-save to compile code and show build errors. (using go build and go test)
  • Vet-on-save to run go vet and show errors as warnings
  • Lint-on-save to show linting errors as warnings (using golint, gometalinter, megacheck, golangci-lint or revive)
  • Semantic/Syntactic error reporting as you type (using gotype-live)

Testing

  • Run Tests under the cursor, in current file, in current package, in the whole workspace using either commands or codelens
  • Run Benchmarks under the cursor using either commands or codelens
  • Show code coverage either on demand or after running tests in the package.
  • Generate unit tests skeleton (using gotests)

Debugging

  • Debug your code, binaries or tests (using delve)

Others

  • Install/Update all dependent Go tools
  • Upload to the Go Playground (using goplay)

Commands

In addition to integrated editing features, the extension also provides several commands in the Command Palette for working with Go files:

  • Go: Add Import to add an import from the list of packages in your Go context
  • Go: Current GOPATH to see your currently configured GOPATH
  • Go: Test at cursor to run a test at the current cursor position in the active document
  • Go: Test Package to run all tests in the package containing the active document
  • Go: Test File to run all tests in the current active document
  • Go: Test Previous to run the previously run test command
  • Go: Test All Packages in Workspace to run all tests in the current workspace
  • Go: Generate Unit Tests For Package Generates unit tests for the current package
  • Go: Generate Unit Tests For File Generates unit tests for the current file
  • Go: Generate Unit Tests For Function Generates unit tests for the selected function in the current file
  • Go: Install Tools Installs/updates all the Go tools that the extension depends on
  • Go: Add Tags Adds configured tags to selected struct fields.
  • Go: Remove Tags Removes configured tags from selected struct fields.
  • Go: Generate Interface Stubs Generates method stubs for given interface
  • Go: Fill Struct Fills struct literal with default values
  • Go: Run on Go Playground Upload the current selection or file to the Go Playground


저작자표시

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


JavaScript 및 TypeScript 용 ES6 구문의 JavaScript 코드 스니펫 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets




지원 언어(파일 확장자)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)


Import and export

TriggerContent
imp→imports entire module import fs from 'fs';
imn→imports entire module without module name import 'animate.css'
imd→imports only a portion of the module using destructing import {rename} from 'fs';
ime→imports everything as alias from the module import * as localAlias from 'fs';
ima→imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→require package require('');
mde→default module.exports module.exports = {};
enf→exports name function export const log = (parameter) => { console.log(parameter);};
edf→exports default function export default (parameter) => { console.log(parameter);};
ecl→exports default class export default class Calculator { };
ece→exports default class by extending a base one export default class Calculator extends BaseClass { };


Class Helpers

TriggerContent
con→adds default constructor in the class constructor() {}
met→creates a method inside a class add() {}
pge→creates a getter property get propertyName() {return value;}
pse→creates a setter property set propertyName(value) {}


Various methods

TriggerContent
fre→forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→for ... of loop for(const item of object) {}
fin→for ... in loop for(const item in object) {}
anfn→creates an anonymous function (params) => {}
nfn→creates a named function const add = (params) => {}
dob→destructing object syntax const {rename} = fs
dar→destructing array syntax const [first, second] = [1,2]
sti→set interval helper method setInterval(() => {});
sto→set timeout helper method setTimeout(() => {});
prom→creates a new Promise return new Promise((resolve, reject) => {});
thenc→adds then and catch declaration to a promise .then((res) => {).catch((err) => {});


Console methods

TriggerContent
cas→console alert method console.assert(expression, object)
ccl→console clear console.clear()
cco→console count console.count(label)
cdi→console dir console.dir
cer→console error console.error(object)
cgr→console group console.group(label)
cge→console groupEnd console.groupEnd()
clg→console log console.log(object)
clo→console log object with name console.log('object :', object);
ctr→console trace console.trace(object)
cwa→console warn console.warn
cin→console info console.info
clt→console table console.table


저작자표시

'언어 > Script' 카테고리의 다른 글

Node Debug - Node.js 디버그  (0) 2018.12.06
npm Intellisense - npm 자동 완성  (1) 2018.11.15
npm - VSCode 에서 npm 지원  (0) 2018.11.15

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


작업 공간에 있는 정의를 기반으로 HTML Class 속성에 대한 CSS Class 이름을 자동 완성해 줍니다.


링크 : https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion




지원 언어 모드

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)


저작자표시

'언어 > CSS & HTML' 카테고리의 다른 글

Highlight Matching Tag - 매칭되는 태그 강조  (0) 2019.01.24
Minify - JS, CSS, HTML 파일 축소  (0) 2018.11.14
HTMLHint - HTML 코드 분석  (0) 2018.10.06
Bootstrap v4 Snippets - 부트 스트랩 스니펫  (0) 2018.10.01
Font Awesome Autocomplete - 폰트 어썸 자동완성  (0) 2018.10.01

+ Recent posts

티스토리툴바