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