"semi-colon expected" 경고 해결 방법(css-semicolonexexpected)

"semi-colon expected" 경고 해결 방법(css-semicolonexexpected)

Tailwindcss를 사용하려고 합니다.@apply에 있어서의 지시.<style>Nuxt.js Vue 파일의 태그.모든 게 잘 돌아가는데 자꾸 짜증나는 빨간 꼬불꼬불한 선이 잡히네요.제발, 얘들아, 나 좀 도와줘...감사해요!

다음은 스크린샷과 스니펫입니다.

<style scoped>

.title {
  @apply text-orient font-light block text-5xl pt-2;
}

.message {
  @apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>

VS 코드에는 이 문제를 해결할 수 있는 기본 제공 방법이 없습니다.이 문제를 해결하려면 Stylelint 확장을 사용하여 CSS 보풀(& SCSS 및/또는 Less 등)을 처리하는 것이 좋습니다.이는 매우 강력하며 이러한 오류를 제거할 뿐만 아니라 스타일시트도 개선할 수 있습니다.

1. 프로젝트에 styleint 종속성을 추가해야 합니다.실행:

npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard

2. 작성하다stylelint.config.js네 프로젝트의 뿌리에.(패키지와 같은 장소입니다.json이 저장됩니다.)

이 스니펫을 그 안에 넣습니다.

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

3. VS 코드 설정에 다음 확장을 설치합니다.

• 스타일린트
• 테일윈드 CSS IntelliSense

4. 마지막으로 로컬 또는 글로벌 VS 코드 조정settings.json포함할 파일:

"css.validate": false,
"less.validate": false,
"scss.validate": false,

이렇게 하면 네이티브 린트가 "비활성화"되지만 Tailwind IntelliSense 플러그인을 사용하여 린트가 발생하는지 확인할 수 있습니다.

다른 솔루션을 찾았습니다.NUXT를 사용한 테일윈드의 사용으로 인해 이상한 @apply 문제가 발생하였습니다.

추가만 하면 됩니다.lang="postcss"로.style태그를 붙이고 이 수정으로 오류가 없습니다.

<style lang="postcss" scoped>
  .title {
      @apply text-purple-600 font-bold;
  }
</style>

Vetur 스타일 유효성 검사 사용 안 함

이러한 CSS 경고는 Vetur 확장에서 발생할 수 있습니다.VShode의 [Problems]페인에 표시되는 경고 아이콘이 Vue 로고일 경우 매우 적합합니다.

Vetur 스타일 검증을 비활성화하면 다른 이점을 잃을 수 있습니다.다만, 장기적으로는, 이 확장 기능보다 풀 기능의 검증자/린터에 의존하는 것이 좋을지도 모릅니다.

1. Vetur 확장 설정으로 이동하여 스타일 확인 옵션을 선택 취소합니다.

--- 또는 ---

2. 에서 프로젝트별 옵션을 설정합니다..vscode/settings.json다음과 같은 파일을 프로젝트 루트에 저장합니다.

   "vetur.validation.style": false

---

Vetur 경고는 다음과 같습니다.

내 생각에 당신은 더 예쁜 것을 사용하고 있고 그 플러그인은 당신이 만들 때 에러가 난다.@apply한 줄에 한 번 써보세요.

<style scoped>
.title {
  @apply text-orient;
  @apply font-light;
  @apply block;
  @apply text-5xl;
  @apply pt-2;
}

.message {
  @apply font-light;
  @apply pb-4;
  @apply text-orient;
  @apply text-2xl;
  @apply text-blue-bayoux;
}
</style>

2단계

1. 다음 행을 .vscode > settings.json에 추가합니다.

"css.validate": false,
"less.validate": false,
"scss.validate": false,

2. StyleLint 확장 설치

https://marketplace.visualstudio.com/items/shinnn.stylelint

재기동, 완료!

Nuxt에서도 같은 문제가 있었습니다.해결책은 이 블로그의 TL:DR:

1. 스타일린트 vscode 확장 설치
2. stylelint.config.js에 이 구성을 추가합니다.

rules: {
   'at-rule-no-unknown': [
     true,
     {
       ignoreAtRules: [
         'tailwind',
         'apply',
         'variants',
         'responsive',
         'screen',
       ],
     },
   ],
   'declaration-block-trailing-semicolon': null,
   'no-descending-specificity': null,
 },

3. 에서 옵션 설정에 이 file vscode vscode validate는 vscode vscode의 vscode를 검증합니다."css.validate": false

이 스텝으로 모든 것이 완벽하게 동작합니다.

만약을 위해 더 예쁜 포맷에도 문제가 있어 vscode 설정에서 이 옵션으로 수정되었습니다.json 파일"vetur.format.defaultFormatter.html": "prettier",

Visual Studio Code 내에서 최신 CSS 및 실험 CSS에 대한 지원이 추가되므로 PostCSS Language Support를 추가해 보십시오.

VS 코드를 사용하여 설정에 다음 항목을 추가했습니다.

"files.associations": {
  "*.vue": "html"
}

그 후, 에러는 없어졌습니다.

언급URL : https://stackoverflow.com/questions/61443484/how-to-solve-semi-colon-expected-warnings-css-semicolonexpected