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

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

开启 eslint

设置.eslintrc.js

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

{
    "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的问题

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