vue.js vscode eslint&prettyer設定
9166 ワード
vue cliライブラリをインストールした後、npxでプロジェクトを作成します.
設定が完了したら、プロジェクトの設定を行います.
インストールが正常に行われていることを示す画面が表示されます.
vscodeでパスを開きます.eslintrc.jsファイルが作成されていることがわかります.
ファイルのプリファレンスは次のようになります.
cntl+を押してeslint:validateを検索します.
settings.jsonでeditをクリックし、次のコードを追加します.
npm i @vue/cli
npx vue create demo
次のように設定します.
設定が完了したら、プロジェクトの設定を行います.

インストールが正常に行われていることを示す画面が表示されます.

vscodeでパスを開きます.eslintrc.jsファイルが作成されていることがわかります.

ファイルのプリファレンスは次のようになります.
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"plugin:prettier/recommended",
],
parserOptions: {
parser: "@babel/eslint-parser",
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
};
ここにきれいなtierルールを追加//.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/essential',
'eslint:recommended',
'plugin:prettier/recommended',
],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'prettier/prettier': [
'error',
{
singleQuote: true,
semi: true,
useTabs: true,
tabWidth: 2,
trailingComma: 'all',
printWidth: 80,
bracketSpacing: true,
arrowParens: 'avoid',
},
],
},
};
vscode拡張タブに移動し、ESlintとPrettierをインストールします.

cntl+を押してeslint:validateを検索します.

settings.jsonでeditをクリックし、次のコードを追加します.
{
"editor.tabSize": 2,
"editor.fontSize": 17,
// ESLint
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"eslint.workingDirectories": [
{"mode": "auto"}
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// don't format on save
"editor.formatOnSave": false
}
完了したら、変速定周波数を再起動すればいい!Reference
この問題について(vue.js vscode eslint&prettyer設定), 我々は、より多くの情報をここで見つけました https://velog.io/@korjsh/vue.js-vscode-eslint-prettier-설정テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol