Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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配置文件
- Host: GitHub
- URL: https://github.com/masx200/excellent-vscode-extensions-for-javascript
- Owner: masx200
- License: gpl-3.0
- Created: 2019-06-26T00:57:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T09:15:35.000Z (over 4 years ago)
- Last Synced: 2024-11-09T09:44:08.646Z (3 months ago)
- Topics: marketplace, snippets, vscode, vscode-eslint, vscode-extensions
- Language: JavaScript
- Homepage: https://masx200.github.io/excellent-vscode-extensions-for-javascript/
- Size: 53.7 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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