1. 実行後、ブラウザが自動的に開きます。
package.json の vite の後に --open を追加します
2.eslintをインストールする
npm i eslint -D
3. eslint --init を実行した後、いくつかの質問に答えると、.eslintrc 構成ファイルが自動的に作成されます。
npx eslint --init
次のように質問に答えてください。
eslint を使用して文法のみをチェックするか、文法とエラーをチェックし、2 番目のモジュールに使用するモジュールを選択し、
最初のプロジェクト
に使用するフレームワークを選択し、
vue プロジェクトで TyoeScript を使用することを選択し、
yes プロジェクトを実行する場所を選択します。ブラウザを選択します
どのようなタイプの構成を作成する必要がありますか? Javascript を選択した場合、これらのプラグインをインストールする必要がありますか? ts 構文、vue 構文を確認し、
「はい」を選択し
た場合はどのパッケージ管理ツールを使用するかを確認してください。ここに npm
をインストールすると、
プロジェクトに追加の .eslintrc.cjs ファイルが存在します。
4.vue3環境コード検証プラグインをインストールする
//prettier ルールと競合するすべての Eslint ルールを無効にし、コード インスペクションに prettier を使用します。
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-import": "^2.28.1",
"eslint -plugin-node": "^11.1.0",
//より美しい Eslint プラグインを実行して、より美しいルールの優先順位を高くし、Eslint の優先順位を低くします。
"eslint-plugin-prettier": "^5.0.0" ,
//vue.js 用の Eslint プラグイン (vue 構文エラーの検索、間違った命令の検索、違反スタイル ガイドラインの検索)
"eslint-plugin-vue": "^9.17.0",
//このパーサーでは、Eslint を使用してすべてのバベルを検証できますコード
「@babel/eslint-parser」: 「^7.22.10」、
npm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
5. インストール後に .eslintrc.cjs ファイルを再構成します。
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
// 指定如何解析语法
parser: "vue-eslint-parser",
//优先级低于parse的语法解析配置
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
jsxPragma: "Recat",
ecmaFeatures: {
jsx: true,
},
},
// 继承已有的规则
extends: [
"eslint:recommended",
"plugin: @typescript-eslint/recommended",
"plugin: vue/vue3-essential",
"parser: pretter/recommended",
],
overrides: [
{
env: {
node: true,
},
files: [".eslintrc.{js,cjs}"],
parserOptions: {
sourceType: "script",
},
},
],
/**
* 'off' 或0 ==>关闭规则
* 'warn'或1 ==>打开的规则作为警告
* 'error'或2 ==>规则作为一个错误（代码不能执行，界面报错）
*/
plugins: ["@typescript-eslint", "vue"],
rules: {
"no-var": "error", //要求使用let或const而不是var
"no-multiple-empty-lines": ["warn", {
max: 1 }], //不允许多个空行
"no-console": process.env.NODE_ENV == "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV == "production" ? "error" : "off",
"no-unexpected-multiline": "error", //禁止空余的多行
"no-useless-escape": "off", //禁止不必要的转移字符
"@typescript-eslint/no-unused-vars": "error", //禁止定义未使用的变量
"@typescript-eslint/prefer-ts-expect-error": "error", //禁止使用@ts-ignore
"@typescript-eslint/no-explicit-any": "off", //禁止使用any类型
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-namespace": "off", //禁止使用自定义Typescript模板
"@typescript-eslint/semi": "off",
"vue/multi-word-component-names": "off", //要求组件名称始终为'-'链接的单词
"vue/script-setup-users-vars": "error", //防止<script setup>使用的变量<template>标记为未使用
"vue/no-mutating-props": "off", //不允许组件props的改成
"vue/attribute-hyphenation": "off", //对模板中的自定义组件强制执行属性命名样式
},
};
6. 新しい .eslintignore 無視ファイルを作成します。検証は必要ありません。
7. 実行中のスクリプトを追加し、package.json を追加します。npm run lint check 構文、npm run fix 修正エラー構文を追加します。
"lint":"eslint src",
"fix":"eslint src --fix"
8.よりきれいに設定する
eslint は js コードの品質を保証し、prettier は美しいコード、統一された形式を保証し、js を含む複数言語の保護をサポートします。
npm install -D eslint-plugin-prettier eslint-config-prettier
9. .prettier.json を追加します
{
"singleQuote":true,
"semi":false,
"bracketSpacing":true,
"htmlWhitespaceSensitivity":"ignore",
"endOfLine":"auto",
"trailingComma":"all",
"tabWidth":2
}
10. .prettierignore を追加します
/dist/*
/html/*
.local
/node_modules/**
**/* .svg
**/* .sh
/public/*
npm run lint を実行するとエラーが発生する
ルール内のスペースなど、.eslintrc.cjs ファイル内のすべてのスペースを削除します。
次に、npm run lint を再度実行すると、再びエラーが発生します
。eslintrc.cjs ファイルの正しいものは
次のとおりです。これで OK です
。npm run fix を実行してから
npm run lint を実行すると、エラー プロンプトは表示されません
11. stylint関連のプラグインをインストールする
npm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
エラーが発生しました
このエラーは、stylelint のバージョンが現在 14.16.1 であること、[email protected] には 11 ～ 15 の間の stylelint のバージョンが必要であること、[email protected] にはそれ以降の
stylelint バージョンが必要であることを意味します。 15以上
stylelint-config-prettier と stylelint を個別にインストールする
npm add [email protected]
npm add stylelint@12
stylelint-config-recess-order を個別にインストールする
npm add [email protected]
stylelint を再インストールするにはstylelint がバージョン 12 でインストールされているため、ここでエラーが報告されます。
npm add stylelint@15
まだ警告が表示されますが、エラーが間違っているわけではないので、
残りをインストールしてください
npm add sass sass-loader postcss postcss-scss postcss-html stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
インストールは成功しました。stylelint の設定を開始します
12. stylelint は、css コードの整形、css の構文エラーや無理な記述のチェック、css の書き込み順の指定などができる css lint ツールです。 .stylelintrc.cjs 設定ファイルを新たに追加しました
module.export = {
//官网https://stylelint.bootcss.com/
extends: [
'stylelint-config-standard',//配置stylelint拓展插件
'stylelint-config-html/vue',//配置vue中template样式格式化
'stylelint-config-standard-scss',//配置stylelint scss插件
'stylelint-config-recommended-vue/scss',//配置vue中scss样式格式化
'stylelint-config-recess-order',//配置stylelint css属性书写顺序插件
'stylelint-config-prettier',//配置stylelint和prettier兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax:'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax:'postcss-html',
}
],
ignoreFiles: [
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
'**/*.json',
'**/*.md',
'**/*.yaml',
],
/**
* null 关闭该规则
* always 必须
*/
rules: {
'value-keyword-case': null,//在css中使用v-bind不报错
'no-descending-specificity': null,//禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes': 'always',//要求或禁止URL的引号"always"必须加上引号，"never"没有引号
'no-empty-source': null,//关闭禁止空源码
'selector-class-pattern': null,//关闭强制选择器类名的格式
'property-no-unknown': null,//禁止未知的属性，true为不允许
'block-opening-brace-space-before': 'always',//大括号之前必须有一个空格或不能有空白符
'value-no-vendor-prefix': null,//关闭属性值前缀 --webkit-box
'property-no-vendor-prefix': null,//关闭属性前缀 --webkit-mask
'selector-pseudo-class-no-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses:['global','v-deep','deep'],//忽略属性，修改elememt默认样式的时候能使用到
}
]
}
}
13. .stylelintignore 無視ファイルを追加します
/dist/*
/html/*
/node_modules/*
/public/*
14. 実行中のスクリプトを追加し、package.json を追加します。
"format":"prettier --write\"./**/*.{html,vue,ts,js,jsom,md}\"",
"lint:eslint":"eslint src/**/*.{ts,vue} --cache --fix",
"lint:style":"stylelint src/**/*.{css,scss,vue} --cache --fix"
npm run format はコードを直接フォーマットします