Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/masx200/excellent-vscode-extensions-for-javascript

excellent-vscode-extensions-for-javascript 适合于javascript/html/css/vue/react编程的vscode的优秀扩展推荐和vscode 的推荐设置,附送eslint和rollup配置文件
https://github.com/masx200/excellent-vscode-extensions-for-javascript

marketplace snippets vscode vscode-eslint vscode-extensions

Last synced: about 2 months ago
JSON representation

excellent-vscode-extensions-for-javascript 适合于javascript/html/css/vue/react编程的vscode的优秀扩展推荐和vscode 的推荐设置,附送eslint和rollup配置文件

Awesome Lists containing this project

README

        

# excellent-vscode-extensions-for-javascript

https://github.com/masx200/excellent-vscode-extensions-for-javascript

适合于`javascript/html/css/vue/react`编程的 `vscode` 的优秀扩展推荐和 `vscode` 的推荐设置,以及`eslint`配置文件

# vscode 的推荐设置

设置 `settings.json`

```json
{
"workbench.iconTheme": "Material Color",
"workbench.colorTheme": "Material Color",
"editor.formatOnSave": true,
"editor.fontWeight": "bold",
"editor.wordWrap": "bounded"
}
```

# 开启 eslint

## 设置`.eslintrc.js`

```javascript
module.exports = {
env: {
browser: true,
es6: true,
node: true,
worker: true,
commonjs: true,
amd: true
},
extends: "eslint:recommended",
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parserOptions: {
ecmaVersion: 2019,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
rules: {}
};
```

## 设置`.eslintrc.json`

```json
{
"env": {
"browser": true,
"es6": true,
"node": true,
"worker": true,
"commonjs": true,
"amd": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {}
}
```

## 适用于 `vue.js`的`ESlint`配置文件

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/vue.eslintrc.json

## 适用于 `react.js`的`ESlint`配置文件

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/react.eslintrc.json

## 适用于 `typescript`的`ESlint`配置文件

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/tsconfig.json

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/typescript.eslintrc.json

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/rollup.config.js

# 彻底解决 `yarn` 安装慢 `Building fresh packages`的问题

```powershell
yarn config set registry https://registry.npm.taobao.org
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
yarn config set phantomjs_cdnurl http://cnpmjs.org/downloads
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config set profiler_binary_host_mirror http://npm.taobao.org/mirrors/node-inspector/
```

# 推荐的 rollup+typescript 配置文件

https://github.com/masx200/excellent-vscode-extensions-for-javascript/blob/master/rollup.config.js

# 同步 vscode 设置

名称: Settings Sync

id: shan.code-settings-sync

说明: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

版本: 3.3.1

发布者: Shan Khan

VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

# 适合于 javascript/html/css/vue/react 编程的 vscode 的优秀扩展推荐

名称: ESLint

id: dbaeumer.vscode-eslint

说明: Integrates ESLint JavaScript into VS Code.

版本: 1.9.0

发布者: Dirk Baeumer

VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

名称: Beautify

id: hookyqr.beautify

说明: Beautify code in place for VS Code

版本: 1.5.0

发布者: HookyQR

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

名称: Bracket Pair Colorizer 2

id: coenraads.bracket-pair-colorizer-2

说明: A customizable extension for colorizing matching brackets

版本: 0.0.28

发布者: CoenraadS

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

名称: Chinese (Simplified) Language Pack for Visual Studio Code

id: ms-ceintl.vscode-language-pack-zh-hans

说明: Language pack extension for Chinese (Simplified)

版本: 1.35.1

发布者: Microsoft

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

名称: ES7 React/Redux/GraphQL/React-Native snippets

id: dsznajder.es7-react-js-snippets

说明: Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

版本: 2.3.0

发布者: dsznajder

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

名称: Material Color

id: guobing.material-color

说明: material syntax highlighting

版本: 1.1.0

发布者: guobing

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=guobing.material-color

名称: Minify

id: hookyqr.minify

说明: Minify for VS Code.

Minify with command, and (optionally) re-minify on save.

版本: 0.4.3

发布者: HookyQR

VS Marketplace 链接:

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

名称: npm

id: fknop.vscode-npm

说明: npm commands for VSCode

版本: 3.3.0

发布者: Florian Knop

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=fknop.vscode-npm

名称: npm

id: eg2.vscode-npm-script

说明: npm support for VS Code

版本: 0.3.7

发布者: egamma

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

名称: NPM-Scripts

id: trabpukcip.vscode-npm-scripts

说明: View and run NPM scripts in the sidebar.

版本: 0.2.1

发布者: traBpUkciP

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=traBpUkciP.vscode-npm-scripts

名称: PowerShell

id: ms-vscode.powershell

说明: Develop PowerShell scripts in Visual Studio Code!

版本: 2019.5.0

发布者: Microsoft

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell

名称: Prettier - Code formatter

id: esbenp.prettier-vscode

说明: VS Code plugin for prettier/prettier

版本: 1.9.0

发布者: Esben Petersen

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

名称: Sass

id: robinbentley.sass-indented

说明: Indented Sass syntax highlighting, autocomplete & snippets

版本: 1.5.1

发布者: Robin Bentley

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented

名称: Vetur

id: octref.vetur

说明: Vue tooling for VS Code

版本: 0.21.0

发布者: Pine Wu

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=octref.vetur

名称: vscode-icons

id: vscode-icons-team.vscode-icons

说明: Icons for Visual Studio Code

版本: 8.8.0

发布者: VSCode Icons Team

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

名称: vue

id: jcbuisson.vue

说明: Syntax Highlight for Vue.js

版本: 0.1.5

发布者: jcbuisson

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue

名称: Vue 2 Snippets

id: hollowtree.vue-snippets

说明: A Vue.js 2 Extension

版本: 0.1.11

发布者: hollowtree

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

名称: Vue Inline Template

id: faisalhakim47.vue-inline-template

说明: Syntax highlighting for vue inline template inside of JavaScript and TypeScript tagged template strings

版本: 1.0.1

发布者: Faisal Hakim

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=faisalhakim47.vue-inline-template

名称: Vue VSCode Snippets

id: sdras.vue-vscode-snippets

说明: Snippets that will supercharge your Vue workflow

版本: 1.7.1

发布者: sarah.drasner

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

名称: vue-format

id: febean.vue-format

说明: A beautify extension for .vue file

版本: 0.1.6

发布者: fe_bean

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=febean.vue-format

名称: XML Format

id: mikeburgh.xml-format

说明: Format XML documents

版本: 1.0.2

发布者: Mike Burgh

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=mikeburgh.xml-format

名称: XML Formatter

id: fabianlauer.vs-code-xml-format

说明: A simple XML formatter for VS Code.

版本: 0.1.5

发布者: Fabian Lauer

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=fabianlauer.vs-code-xml-format

名称: XML Tools

id: dotjoshjohnson.xml

说明: XML Formatting, XQuery, and XPath Tools for Visual Studio Code

版本: 2.5.0

发布者: Josh Johnson

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml

名称: yarn

id: gamunu.vscode-yarn

说明: yarn commands for VSCode

版本: 1.6.0

发布者: Gamunu Balagalla

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=gamunu.vscode-yarn

名称: yarn Script Runner

id: carlosjs23.vscode-yarn-script

说明: Run yarn scripts from the Command Palette

版本: 0.0.1

发布者: carlosjs23

VS Marketplace 链接:

https://marketplace.visualstudio.com/items?itemName=carlosjs23.vscode-yarn-script