方法VSCode出会うESlint構成コードを更新フォーマット--2020

序文

VSCodeは、ユーザー定義ファイルの後に暴力的なエスカレーションを受けたsettings.json、比較的大きな変化があった、多くのプラグインのホーム・ページには、関連する設定を変更する方法を書きました。

この記事では、別の大きいブログはエラー部品や廃止された部品の除外に基づいて、ユーザがコードセットを変更します

おかげで非常に！

ステップ

https://www.cnblogs.com/zhoudawei/p/11198781.htmlは、適切なプラグインをダウンロードし、設定ファイルを開くよります
最終的な修正されたコードは次の通り：

（以前場合はsettings.json、コードがそこに持っている、コードの中括弧の最も外側の次のピースを削除してください{}）

{
    // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
    "editor.formatOnSave": false,
    //设置tab的缩进为2
    "editor.tabSize": 2,
    // #每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #让prettier使用eslint的代码格式进行校验
    // vscode 更新后已经统一使用editor.codeActionsOnsave
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按"prettier"格式进行格式化
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    } // 两个选择器中是否换行
}

PS。この変更の影響は、関数の前に正直に効果を取ることができるかどうか、してくださいセルフテストORZ、VSCodeが与えられていないようにすることです

補足は、問題とその解決策に遭遇しました

使用ESlint問題が発生する可能性があり、プラグインをロードできませんでした。

あなたが使用するように求めるメッセージが表示されますnpm手動でインストールし、その後、手動でインストールします。

ダウンロードNode.jsしてインストールしてください。（主な問題は、百度でそれをインストールする方法を具体的には、前に長い時間をダウンロードすることです）
ターミナルを開きます。この時間は、入力がいることを注意npm install eslint -g可能性がダウンロードインターフェイス動かで立ち往生されていることです。正しい方法は、淘宝網のソースを交換することです
入力npm config set registry https://registry.npm.taobao.orgソースの交換をし、入力してnpm config get registry、成功するかどうかを確認します
入力しnpm install eslint -gてインストールをESLint。

そのような別の更新ORZ eslint把握することを主な問題として、フォローアップの質問があるかもしれません

方法VSCode出会うESlint構成コードを更新フォーマット--2020

序文

ステップ

補足は、問題とその解決策に遭遇しました

おすすめ