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
次のように設定します.![](https://s1.md5.ltd/image/57ccc8434d8718aacc86f4705cf76fee.png)
設定が完了したら、プロジェクトの設定を行います.
![](https://s1.md5.ltd/image/8da57a18a4dc10ddca6b0210d57c4e31.png)
インストールが正常に行われていることを示す画面が表示されます.
![](https://s1.md5.ltd/image/75eec053b500225fbfd6ef63ba0cbcfb.png)
vscodeでパスを開きます.eslintrc.jsファイルが作成されていることがわかります.
![](https://s1.md5.ltd/image/4fbc6d1d30212732c0d7e9fa7df219d1.png)
ファイルのプリファレンスは次のようになります.
//.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をインストールします.![](https://s1.md5.ltd/image/7b22c3cdc7afdf13881f5822d09d4186.png)
![](https://s1.md5.ltd/image/1089bcaa5e64d63308aee69809809e3b.png)
cntl+を押してeslint:validateを検索します.
![](https://s1.md5.ltd/image/ef7e64cc7e7c4b06fb91f97ee4e56bde.png)
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