Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 使用eslint规范代码, 城市筛选添加本地缓存 #57

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'@antfu/eslint-config-vue',
'plugin:vue/vue3-recommended',
'plugin:import/recommended',
'plugin:import/typescript',
'plugin:promise/recommended',
'plugin:sonarjs/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:case-police/recommended'
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 13,
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
ignorePatterns: ['node_modules', 'dist', '*.d.ts', 'vendor'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

// indentation (Already present in TypeScript)
'comma-spacing': ['error', { before: false, after: true }],
'key-spacing': ['error', { afterColon: true }],
'n/prefer-global/process': ['off'],
'sonarjs/cognitive-complexity': ['off'],

'vue/first-attribute-linebreak': ['error', {
singleline: 'beside',
multiline: 'below'
}],

'antfu/top-level-function': 'off',
'@typescript-eslint/no-explicit-any': 'off',

// indentation (Already present in TypeScript)
'indent': ['error', 2],

// Enforce trailing comma (Already present in TypeScript)
'comma-dangle': 'off',
'@typescript-eslint/comma-dangle': ['error', 'never'],

// Enforce consistent spacing inside braces of object (Already present in TypeScript)
'object-curly-spacing': ['error', 'always'],

// Enforce camelCase naming convention
'camelcase': 'error',

// Disable max-len
'max-len': 'off',

// we don't want it
'semi': 'off',
'@typescript-eslint/semi': ['error', 'always'],

// add parens ony when required in arrow function
'arrow-parens': ['error', 'as-needed'],

// add new line above comment
'newline-before-return': 'error',

// add new line above comment
'lines-around-comment': [
'error',
{
beforeBlockComment: true,
beforeLineComment: true,
allowBlockStart: true,
allowClassStart: true,
allowObjectStart: true,
allowArrayStart: true,

// We don't want to add extra space above closing SECTION
ignorePattern: '!SECTION'
}
],

// Ignore _ as unused variable
'@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_+$', argsIgnorePattern: '^_+$' }],

'array-element-newline': ['error', 'consistent'],
'array-bracket-newline': ['error', 'consistent'],

'vue/multi-word-component-names': 'off',

'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: 'expression', next: 'const' },
{ blankLine: 'always', prev: 'const', next: 'expression' },
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
{ blankLine: 'always', prev: '*', next: 'multiline-const' }
],

// Plugin: eslint-plugin-import
'import/prefer-default-export': 'off',
'import/newline-after-import': ['error', { count: 1 }],
'no-restricted-imports': ['error', 'vuetify/components', {
name: 'vue3-apexcharts',
message: 'apexcharts are autoimported'
}],

// For omitting extension for ts files
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never'
}
],

// ignore virtual files
'import/no-unresolved': [2, {
ignore: [
'~pages$',
'virtual:generated-layouts',

// Ignore vite's ?raw imports
'.*\?raw'
]
}],

// Thanks: https://stackoverflow.com/a/63961972/10796681
'no-shadow': 'off',
'@typescript-eslint/no-shadow': ['error'],

'@typescript-eslint/consistent-type-imports': 'error',

// Plugin: eslint-plugin-promise
'promise/always-return': 'off',
'promise/catch-or-return': 'off',

// ESLint plugin vue
'vue/block-tag-newline': 'error',
'vue/component-api-style': 'off',
'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false, ignores: ['/^swiper-/'] }],
'vue/custom-event-name-casing': ['error', 'camelCase', {
ignores: [
'/^(click):[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/'
]
}],
'vue/define-macros-order': 'error',
'vue/html-comment-content-newline': 'error',
'vue/html-comment-content-spacing': 'error',
'vue/html-comment-indent': 'error',
'vue/match-component-file-name': 'error',
'vue/no-child-content': 'error',
'vue/require-default-prop': 'off',

'vue/no-duplicate-attr-inheritance': 'error',
'vue/no-empty-component-block': 'error',
'vue/no-multiple-objects-in-class': 'error',
'vue/no-reserved-component-names': 'error',
'vue/no-template-target-blank': 'error',
'vue/no-useless-mustaches': 'error',
'vue/no-useless-v-bind': 'error',
'vue/padding-line-between-blocks': 'error',
'vue/prefer-separate-static-class': 'error',
'vue/prefer-true-attribute-shorthand': 'error',
'vue/v-on-function-call': 'error',
'vue/no-restricted-class': ['error'],
'vue/valid-v-slot': ['error', {
allowModifiers: true
}],

// -- Extension Rules
'vue/no-irregular-whitespace': 'error',
'vue/template-curly-spacing': 'error',

// -- Sonarlint
'sonarjs/no-duplicate-string': 'off',
'sonarjs/no-nested-template-literals': 'off'
},
settings: {
'import/resolver': {
node: true,
typescript: {}
}
}
};
4 changes: 2 additions & 2 deletions .github/workflows/autofix.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
- name: Install
run: pnpm install

- name: Format
run: pnpm format
- name: ESLint
run: pnpm run lint

- uses: autofix-ci/action@d3e591514b99d0fca6779455ff8338516663f7cc
5 changes: 3 additions & 2 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"recommendations": [
"esbenp.prettier-vscode",
"antfu.unocss",
"vue.volar"
"vue.volar",
"dbaeumer.vscode-eslint"
]
}
}
20 changes: 20 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"editor.formatOnSave": true,
"files.insertFinalNewline": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.autoClosingBrackets": "always"
},
"[vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
},
// Extension: ESLint
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
},
"eslint.format.enable": true
}
6 changes: 5 additions & 1 deletion app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { Toaster } from '@/components/ui/sonner';
</script>

<template>
<Toaster richColors closeButton position="top-right" />
<Toaster
rich-colors
close-button
position="top-right"
/>
<NuxtLoadingIndicator />
<NuxtLayout>
<NuxtLoadingIndicator />
Expand Down
77 changes: 43 additions & 34 deletions components/BuyReportForm.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
<script setup lang="ts">
import { Slider } from '@/components/ui/slider';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue
} from '@/components/ui/select';

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
FormControl,
Expand All @@ -31,21 +23,26 @@ const { form, onSubmit } = useReportForm({

const changePricePercent = (type: 'add' | 'reduce') => {
const percent = form.values.percent?.[0] ?? 100;
if (type === 'add') {
if (type === 'add')
form.setFieldValue('percent', [percent + 1]);
} else {
else
form.setFieldValue('percent', [percent - 1]);
}
};
</script>

<template>
<form class="grid gap-4 py-4" @submit="onSubmit">
<form
class="grid gap-4 py-4"
@submit="onSubmit"
>
<div class="space-x-2 text-lg">
<span class="font-bold">买入 {{ product.name }}</span>
</div>

<FormField v-slot="{ componentField }" name="price">
<FormField
v-slot="{ componentField }"
name="price"
>
<FormItem>
<FormLabel>价格</FormLabel>
<FormControl>
Expand All @@ -55,60 +52,70 @@ const changePricePercent = (type: 'add' | 'reduce') => {
v-bind="componentField"
/>
</FormControl>
<FormDescription></FormDescription>
<FormDescription />
<FormMessage />
</FormItem>
</FormField>

<FormField v-slot="{ componentField }" name="percent">
<FormField
v-slot="{ componentField }"
name="percent"
>
<FormItem>
<FormLabel>价位</FormLabel>
<FormControl>
<div class="flex items-center space-x-2">
<span
class="i-icon-park-outline-reduce-one text-xl cursor-pointer"
@click="changePricePercent('reduce')"
></span>
<Slider v-bind="componentField" :default-value="[100]" :max="160" :min="30" :step="1" />
/>
<Slider
v-bind="componentField"
:default-value="[100]"
:max="160"
:min="30"
:step="1"
/>
<span
class="i-icon-park-outline-add-one text-xl cursor-pointer"
@click="changePricePercent('add')"
></span>
/>
</div>
<FormDescription class="flex justify-between">
<span
>{{ form.values.targetCity !== city.name ? '售出价位' : '买入价位' }}
{{ form.values.percent?.[0] ?? 100 }}%</span
>
<span>{{ form.values.targetCity !== city.name ? '售出价位' : '买入价位' }}
{{ form.values.percent?.[0] ?? 100 }}%</span>
</FormDescription>
</FormControl>
<FormMessage />
</FormItem>
</FormField>

<FormField v-slot="{ componentField }" type="radio" name="trend">
<FormField
v-slot="{ componentField }"
type="radio"
name="trend"
>
<FormItem class="space-y-3">
<FormLabel>涨跌趋势</FormLabel>

<FormControl>
<RadioGroup class="flex space-x-4" v-bind="componentField">
<RadioGroup
class="flex space-x-4"
v-bind="componentField"
>
<FormItem class="flex items-center space-y-0">
<FormControl>
<RadioGroupItem value="up" />
<FormLabel
class="flex items-center font-normal text-xl text-green pl-2 cursor-pointer"
>
<span class="i-material-symbols-trending-up text-green"></span>
<FormLabel class="flex items-center font-normal text-xl text-green pl-2 cursor-pointer">
<span class="i-material-symbols-trending-up text-green" />
</FormLabel>
</FormControl>
</FormItem>
<FormItem class="flex items-center space-y-0">
<FormControl>
<RadioGroupItem value="down" />
<FormLabel
class="flex items-center font-normal text-xl text-red pl-2 cursor-pointer"
>
<span class="i-material-symbols-trending-down text-red"></span>
<FormLabel class="flex items-center font-normal text-xl text-red pl-2 cursor-pointer">
<span class="i-material-symbols-trending-down text-red" />
</FormLabel>
</FormControl>
</FormItem>
Expand All @@ -118,6 +125,8 @@ const changePricePercent = (type: 'add' | 'reduce') => {
</FormItem>
</FormField>

<Button type="submit">上报</Button>
<Button type="submit">
上报
</Button>
Comment on lines +128 to +130
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个语义一致吗,会多空格吗?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

多空格其实也不影响,不过这个换行确实有点奇怪,ESlint应该也是可配置的

</form>
</template>
Loading
Loading