最近キーeslint効率的なフォーマットとして、あなたは次の構成を考えることはできませんTSの使用、非常に便利vscodeに使わ見つけtslintは、書き込みJSクールに似vscodeで
、この記事では二つの問題を最初に解決するために主ですどのようvscode使用リントTSを作るために、第二はeslintコンフィギュレーションを作成する方法で、きれいvscodeプラグインがお互いに競合がないフォーマットされたこれら2つのコード
リントTSのvscode使用
糸くずの最初のtsがtslint、およびこのようなもの当局は維持していると言う、プラグインtypescriptです-eslintこのeslintを行うまでになっていません
https://github.com/typescript-eslint/typescript-eslint#gettingを公式ドキュメント-started
それはきれいなプロジェクトである場合は、文書によると、よりインテリジェントな示唆、Gengshuangを書き込むためには、何の問題もありませんあなたが読むことをお勧め
typescriptです-eslintでより効率的な設定を行います
オンライン書き込みvscode設定eslintときれいには、個人的に感じる類似しており、多くの設定に記事が廃止され、多くの記事の主要なフォーマットに達して
も、明確なコメントは私が直接、比較的新しい文言に添付します
{
// 重新设定tabsize
"editor.tabSize": 4,
"prettier.tabWidth": 4, // 缩进字节数
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复 ,"eslint.autoFixOnSave": true 这个已经过时了
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 添加 vue,ts 支持，官方是不推荐用这个，但是你为了是ts文件在vscode自动提示而不是文件编译才提示就必须加这个
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript"
{
"language": "vue",
"autoFix": true
}
],
// #默认是true加上分号，false是在有些容易出问题的地方（ASI failures）首部加分号
// 详细请看https://prettier.io/docs/en/rationale.html#semicolons
"prettier.semi": false,
// #使用单引号替代双引号,不生效就是eslint做了限制
"prettier.singleQuote": false,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"javascript.format.enable": false,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
// 如果是ts就使用prettier-eslint ，这个需要cpm
"vetur.format.defaultFormatter.ts": "prettier-eslint",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline",
"end_with_newline": false
// #vue组件中html代码格式化样式
}
},
"editor.fontSize": 16,
"terminal.integrated.rendererType": "dom",
"window.zoomLevel": 0,
"vscode_vibrancy.opacity": -1,
"vscode_vibrancy.theme": "Default Dark",
"glassit.alpha": 220,
"vscode_vibrancy.type": "acrylic",
"search.followSymlinks": false,
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"editor.detectIndentation": false,
"vetur.format.options.tabSize": 4,
}これは、コードvscode構成ですが、また.eslintrc.jsを使用しました
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:vue/essential',
'prettier'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaVersion: 2018,
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-console': 2,
'no-debugger': 2,
'semi-spacing': ['error', { before: true, after: true }],
quotes: ['error', 'single', { allowTemplateLiterals: true }]
}
}
その後、手動でNPM以下のライブラリをする必要があり
eslint-CONFIG-きれい@ typescript- eslint /パーサ@ typescriptです-eslint /きれい-eslintをeslint、プラグイン
の長いeslintの構成と同様に、つまり、解決されていない、あなたが通常使用することができますが、小さな問題がありますtsが、検証TS TSファイルが行くのjsファイルjsの検証を行くことができない、プロジェクト全体はTSを確認するために行われる検証します
最終的に知るためには、いくつかのコピーは何ですか
上記のコードは、あなたが通常の開発することができます場合、私はあなたを助けることができてとても幸せですが、私は最後にあなたについてのパスをお話したいと思いやってで動作して、プログラマがちょうどコピー＆ペーストすることはできません、私は一般的に話しますveturきれいeslint typescriptです-eslintは、実際には、私が特に〜理解していない
1 vetur
//vuejs.github.io/vetur/setup.htmlます。https：公式文書
、それをインストールしている確かにVUEを開発するために使用vscodeプログラマーを私は記事Guannameduoが、これは個人的な意見で公式文書話すの下に互換性のtsのように見えたと言って、それが安全なインストールをお勧めします見ていた前に、しかし、何が、それを使用し
、それは、コード検出をフォーマット、シンタックスハイライトが特徴コードスニペットは、と私はナンセンス恐怖を話すことができないかわからない、いくつかは、噴霧される
構文の強調表示は、コードスニペットは、VUEで終わるコード検出手段vscodeが直接ファイルをコンパイルすることなく検出することができる、1を理解するために、言うことはありませんファイル、それは自動的にそのような機能を使用するように書き込まれたデータのごVUEなど、いくつかのポイントを設置検出、あなたは役に立たない、それはプロンプトeslint-プラグインVUEで機能するかどうか
、これらの日フォーマットするために、私は研究に焦点を当てるものです 特定の話に
フォーマット私にそれがvetur書式設定機能を持っていない、彼は他の形式のプラグインパッケージの瞬間のためであるという印象を与え、あなたが使うプラグインを選択することができ、Configureをフォーマットするとき
、ここで私はきれい-eslintを使用書式設定ツールとして、ライブラリが使用NPMになるはず、彼の機能は、コードのフォーマットきれいなスタイルを使用することですし、コードの構文を確認して、あなたのコードをフォーマットeslintさらにeslintに基づいており
、JS-美しく- HTMLを使用してHTMLこのインターネットをたくさん使用方法、あなたも私のvscodeプロファイルが上に設定されている方法を見て
2きれい、eslint
きれい主な機能は、最初に私は理解していなかった2構文の検証を、行うために、スタイルのフォーマットコードを行う主eslintするために使用されているが、いくつかの、セミコロンかどうか、文字列は単一引用符または二重引用符これらの彼らを使用するように設定することができます